{"id":6338,"date":"2025-06-30T12:30:02","date_gmt":"2025-06-30T17:30:02","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6338"},"modified":"2025-06-30T12:30:03","modified_gmt":"2025-06-30T17:30:03","slug":"step-gradients-with-a-given-number-of-steps","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/step-gradients-with-a-given-number-of-steps\/","title":{"rendered":"Step Gradients with a Given Number of Steps"},"content":{"rendered":"\n

Let’s say we want some stepped gradients like the ones below, with a certain number of steps.<\/p>\n\n\n

\n
\"Desired_linear_result
the desired result<\/figcaption><\/figure>\n<\/div>\n\n\n

Before reading further, try thinking about this. You are only given the start and end steps and the rest should be obtained via linear interpolation. How would you create them? Maybe put together a quick demo.<\/p>\n\n\n\n

Note that this is a different problem from stepped gradients with\u00a0a certain step size<\/a>. The given step size problem is way more complex and it’s impossible to solve with CSS alone as long as we don\u2019t have native looping. SVG filters provide a solution<\/a>, though they limit us to using just pixel values for the step size; having\u00a0em<\/code> or\u00a0calc()<\/code> values there isn’t possible without JS.<\/p>\n\n\n\n

The Classic CSS Approach<\/h2>\n\n\n\n

This means computing the intermediate step values and specifying a stop and positions for each step. Something like this:<\/p>\n\n\n

.step<\/span> {\n  background<\/span>: linear-gradient<\/span>(\n    90deg<\/span>,\n    #00272<\/span>b 10%<\/span>,\n    #193<\/span>f2f 0<\/span> 20%<\/span>,\n    #325833<\/span> 0<\/span> 30%<\/span>,\n    #4<\/span>b6f36 0<\/span> 40%<\/span>,\n    #64873<\/span>b 0<\/span> 50%<\/span>,\n    #7<\/span>c9f3f 0<\/span> 60%<\/span>,\n    #95<\/span>b743 0<\/span> 70%<\/span>,\n    #aecf47 0<\/span> 80%<\/span>,\n    #c7e74b 0<\/span> 90%<\/span>,\n    #e0ff4f 0<\/span>\n  );\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Tedious!<\/p>\n\n\n\n
.step<\/span> {\n  background<\/span>: linear-gradient<\/span>(\n    90deg<\/span>,\n    #00272<\/span>b 0%<\/span>,  #00272<\/span>b 10%<\/span>,\n    #193<\/span>f2f 10%<\/span>, #193<\/span>f2f 20%<\/span>,\n    #325833<\/span> 20%<\/span>, #325833<\/span> 30%<\/span>,\n    #4<\/span>b6f36 30%<\/span>, #4<\/span>b6f36 40%<\/span>,\n    #64873<\/span>b 40%<\/span>, #64873<\/span>b 50%<\/span>,\n    #7<\/span>c9f3f 50%<\/span>, #7<\/span>c9f3f 60%<\/span>,\n    #95<\/span>b743 60%<\/span>, #95<\/span>b743 70%<\/span>,\n    #aecf47 70%<\/span>, #aecf47 80%<\/span>,\n    #c7e74b 80%<\/span>, #c7e74b 90%<\/span>,\n    #e0ff4f 90%<\/span>, #e0ff4f 100%<\/span>\n  );\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\/\/ $c0: gradient start<\/span>\n\/\/ $c1: gradient end<\/span>\n\/\/ $n: number of steps<\/span>\n@function<\/span> stop-list($c0<\/span>, $c1<\/span>, $n<\/span>) {\n  $l<\/span>: (); \/\/ list of stops, initially empty<\/span>\n\n  @for<\/span> $i<\/span> from 0<\/span> to $n<\/span> {\n    $l<\/span>: $l<\/span>, mix($c1<\/span>, $c0<\/span>, $i<\/span> * 100%<\/span>\/ ($n<\/span> - 1<\/span>)) 0<\/span> ($i<\/span> + 1<\/span>) * 100%<\/span> \/ $n<\/span>;\n  }\n\n  @return<\/span> $l<\/span>;\n}\n\n.step<\/span> {\n  background<\/span>: linear-gradient(90deg<\/span>, stop-list(#00272b<\/span>, #e0ff4f<\/span>, 10<\/span>));\n}<\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
This produces the following compiled result:<\/p>\n\n\n
.step<\/span> {\n  background<\/span>: linear-gradient<\/span>(\n    90deg<\/span>,\n    #00272<\/span>b 0<\/span> 10%<\/span>,\n    #193<\/span>f2f 0<\/span> 20%<\/span>,\n    #325833<\/span> 0<\/span> 30%<\/span>,\n    #4<\/span>b6f36 0<\/span> 40%<\/span>,\n    #64873<\/span>b 0<\/span> 50%<\/span>,\n    #7<\/span>c9f3f 0<\/span> 60%<\/span>,\n    #95<\/span>b743 0<\/span> 70%<\/span>,\n    #aecf47 0<\/span> 80%<\/span>,\n    #c7e74b 0<\/span> 90%<\/span>,\n    #e0ff4f 0<\/span> 100%<\/span>\n  );\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Not bad \u2014 but we should probably tweak that generating function a bit so we get rid of the unnecessary 0<\/code> and 100%<\/code> stop positions at the very start and at the very end and to add rounding in case 100<\/code> is not a multiple of $n<\/code>.<\/p>\n\n\n
\/\/ $c0: gradient start<\/span>\n<\/span><\/span>\/\/ $c1: gradient end<\/span>\n<\/span><\/span>\/\/ $n: number of steps<\/span>\n<\/span><\/span>@function<\/span> stop-list($c0<\/span>, $c1<\/span>, $n<\/span>) {\n<\/span><\/span>  $l<\/span>: (); \/\/ list of stops, initially empty<\/span>\n<\/span><\/span>\n<\/span><\/span>  @for<\/span> $i<\/span> from 0<\/span> to $n<\/span> {\n<\/span><\/span>    $l<\/span>: $l<\/span>,\n<\/span><\/span>      mix($c1<\/span>, $c0<\/span>, $i<\/span> * 100%<\/span>\/ ($n<\/span> - 1<\/span>))\n<\/span><\/span>      \/\/ 1s<\/span>t stop position for each stop\n<\/span><\/span>      \/\/ not set (empty ''<\/span>) for very first stop\n<\/span><\/span>      if($i<\/span> > 0<\/span>, 0<\/span>, unquote(\"\"<\/span>))\n<\/span><\/mark>      \/\/ 2<\/span>nd stop position for each stop\n<\/span><\/span>      \/\/ not set (empty ''<\/span>) for very last stop\n<\/span><\/span>      if($i<\/span> < $n<\/span>, round(($i<\/span> + 1<\/span>) * 100%<\/span> \/ $n<\/span>), unquote(\"\"<\/span>));\n<\/span><\/mark>  }\n<\/span><\/span>\n<\/span><\/span>  @return<\/span> $l<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
Much better \u2014 but the Sass function doesn’t look pretty and it gets even more complex if we need to round those percentages to a certain precision $p<\/code>, a certain number of decimals, not just to integer percentage values:<\/p>\n\n\n
@use<\/span> \"sass:math\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>\/\/ $c0: gradient start<\/span>\n<\/span><\/span>\/\/ $c1: gradient end<\/span>\n<\/span><\/span>\/\/ $n: number of steps<\/span>\n<\/span><\/span>\/\/ $p: rounding precision, how many decimals to keep<\/span>\n<\/span><\/span>@function<\/span> stop-list($c0<\/span>, $c1<\/span>, $n<\/span>, $p<\/span>: 2<\/span>) {\n<\/span><\/span>  $l<\/span>: (); \/\/ list of stops, initially empty<\/span>\n<\/span><\/span>\n<\/span><\/span>  @for<\/span> $i<\/span> from 0<\/span> to $n<\/span> {\n<\/span><\/span>    $l<\/span>: $l<\/span>,\n<\/span><\/span>      mix($c1<\/span>, $c0<\/span>, $i<\/span> * 100%<\/span>\/ ($n<\/span> - 1<\/span>))\n<\/span><\/span>      \/\/ 1s<\/span>t stop position for each stop\n<\/span><\/span>      \/\/ not set (empty ''<\/span>) for very first stop\n<\/span><\/span>      if($i<\/span> > 0<\/span>, 0<\/span>, unquote(\"\"<\/span>))\n<\/span><\/span>      \/\/ 2<\/span>nd stop position for each stop\n<\/span><\/span>      \/\/ not set (empty ''<\/span>) for very last stop\n<\/span><\/span>      if(\n<\/span><\/mark>        $i<\/span> < $n<\/span> - 1<\/span>,\n<\/span><\/mark>        round(($i<\/span> + 1<\/span>) * 100%<\/span> \/ $n<\/span> * math.pow(10<\/span>, $p<\/span>)) * math.pow(10<\/span>, -$p<\/span>),\n<\/span><\/mark>        unquote(\"\"<\/span>)\n<\/span><\/mark>      );\n<\/span><\/mark>  }\n<\/span><\/span>\n<\/span><\/span>  @return<\/span> $l<\/span>;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> SCSS<\/span> (<\/span>scss<\/span>)<\/span><\/small><\/pre>\n\n\n
We could generate the stop list using Sass with looping and the mix()<\/code><\/a> function.<\/p>\n\n\n
And this is the simplified version, the one that avoids repeating stops and stop positions<\/a>, something that has been well-supported cross-browser for over half a decade, by the way. Because I often see the ancient, inefficient version that duplicates everything:<\/p>\n\n\n