"Hard CSS gradients" can be shortened to not include redundant values

Today I read "While You Weren't Looking, CSS Gradients Got Better" by Ana Tudor. Ana's articles are always full of CSS knowledge, and I can only recommend following her and her work.

The article includes a nifty little CSS gradient trick. Let's say you have a linear-gradient that includes "hard color stops". Then your CSS looks like the following:

.element {
  /* some styles */
  background: linear-gradient(
    #fc6262 20%,     /* start at 0 and end at 20% */
    #50bbf6 20% 40%, /* start at 20% and end at 40% */
    #aaffef 40% 60%, /* start at 40% and end at 60% */
    #f9e699 60% 80%, /* and so on... */
    #2c3749 80%
  );
}

This approach works fine, but it has one downside. To define a hard border between two colors, you must specify an identical start and stop value. These duplicated values harm readability and maintenance.

A trick that caught my eye can help to avoid this duplication. You'll find a color-stop fixup section in the CSS images specification.

A color-what, you may ask? Let's have a look!

The above fixup rule defines that if a color-start value is smaller than the previous stop value, the stop value will be used as a start. This behavior allows the usage of a little trick. CSS gradients, including hard color stops, can be adjusted and use 0 as start values. Redundant color-start values can be removed.

.element {
  /* some styles */
  background: linear-gradient(
    #fc6262 20%,   /* start at 0 and end at 20% */
    #50bbf6 0 40%, /* start at 20% (fixed because 0 is smaller than 20%) and end at 40% */
    #aaffef 0 60%, /* start at 40% (fixed because 0 is smaller than 40%) and end at 60% */
    #f9e699 0 80%, /* and so on... */
    #2c3749 0
  );
}

Ben Briggs also shared that cssnano uses this technique to minify CSS. Pretty cool! 😲

If you want to see some gradients using color-stop fixups, have a look at this example CodePen.