Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.

Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.

``` @use 'sass:math'; // $n: number to round to a certain precision // $p: rounding precision, how many decimals to keep @function round-to($n, $p: 2) { @return round($n*math.pow(10, $p))*math.pow(10, -$p) } // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops @for $i from 0 to $n { $l: $l, if($i > 0, if($i < $n - 1, color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0), $c1), $c0) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote('')) } @return $l } p { background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10)) } ``` ``` p { background: linear-gradient(90deg, var(--c0) 10%, color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%, color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%, color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%, color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%, color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%, color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%, color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%, color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%, var(--c1) 0) } ```

Screenshot of the modified Sass mixin using CSS variables and `color-mix()`. On the right, we also have a DevTools panel open, showing the changing one of the end steps changes all intermediary ones this way.