Skip to content

Instantly share code, notes, and snippets.

@pale2hall

pale2hall/colors.php

Created January 2, 2019 17:44
Show Gist options
  • Save pale2hall/6613782c0de6f1669bb0d3e56beb2849 to your computer and use it in GitHub Desktop.
Save pale2hall/6613782c0de6f1669bb0d3e56beb2849 to your computer and use it in GitHub Desktop.
Download ZIP
PHP Function for CSS Gradients from Array of Colors
Raw
colors.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>PHP Color Gradient</title>
<style media="screen">
.gradient{
width: 100%;
height:2rem;
padding-top:1rem;
padding-bottom:1rem;
text-align: center;
color:rgba(255,255,255,.2);
border:1px solid black;
}
.gradient:hover{
color:white;
}
</style>
</head>
<body>
<?php
function cssGradient($colors, $direction = "to right"){
$colorCount = count($colors);
$css = "";
$i = 0;
foreach($colors as $color){
$percent = round($i * (100/($colorCount - 1)));
if($i > 0) $css .= ", ";
$css .= "$color $percent%";
$i++;
}
return "linear-gradient($direction, $css );";
}
$colors= [ '#32c6f4', '#2eb1e6', '#3880bf', '#20a760', '#108153', '#bad531', '#6db744'];?>
<div class="gradient" style="background: <?=cssGradient($colors)?>"><?=cssGradient($colors)?></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment