CSS Tip

How to correctly define a one-color gradient

Learn the correct way to create a one-color gradient with an optimized code. Stop using default values and save some space!

All the below are the same. You can save up to 32 chars!

.gradient {
  background: linear-gradient(75deg,#D95B43 0%,#D95B43 100%);/* 46 chars */
  /* you don't need the angle if it's the same color */
  background: linear-gradient(#D95B43 0%,#D95B43 100%);      /* 40 chars */
  /* you can remove the 0% and 100%, they are implicit */
  background: linear-gradient(#D95B43,#D95B43);              /* 32 chars */
  /* if it's the same color, write it once with two color stops 
     the color stops don't matter so use the shortest one
  */
  background: linear-gradient(#D95B43 0 0);                  /* 28 chars */
  /* if it's a one-color gradient any type of gradient will do the job
     so pick the conic-gradient() as it's one character shorter
  */
  background: conic-gradient(#D95B43 0 0);                   /* 27 chars */
  
  
  /* In the near future, we can also remove the color stops */
  background: conic-gradient(#D95B43);                       /* 23 chars */
  /* In another future, we will have a better function to create 
     a one-color image (yes, gradients are images)
  */
  background: image(#D95B43);                                /* 14 chars */
}

Where you need a one-color gradient? Everywhere!

Hover Effects: css-tricks.com/cool-hover-effects-using-background-properties

See the Pen hover effect by Temani Afif (@t_afif) on CodePen.

CSS Loaders: css-tricks.com/single-element-loaders-the-bars

See the Pen The bars by Temani Afif (@t_afif) on CodePen.

Decorations and shapes with border-image: smashingmagazine.com/2024/01/css-border-image-property

See the Pen Infinite image shadow by Temani Afif (@t_afif) on CodePen.

See the Pen A simple Tooltip using 2 CSS properties by Temani Afif (@t_afif) on CodePen.

Masking: css-tip.com/border-gradient

See the Pen Gradient borders with rounded corners by Temani Afif (@t_afif) on CodePen.

And many more!

More CSS Tips