How to correctly define a one-color gradient

Temani Afif10/21/24About 2 minCSSArticle(s)blogcss-tip.comcss

How to correctly define a one-color gradient 관련

CSS > Article(s)

Article(s)

The most optimized way to create 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 */
}                               /* 14 chars */

Where you need a one-color gradient? Everywhere!

Hover Effects

Cool Hover Effects That Use Background Properties

A while ago, Geoff wrote an article about a cool hover effect. The effect relies on a combination of CSS pseudo-elements, transforms, and transitions. A lot

See hover effect by t_afif on CodePen.

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

See The bars by t_afif on CodePen.

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

See Infinite image shadow by t_afif on CodePen.

See A simple Tooltip using 2 CSS properties by t_afif on CodePen.

Masking: css-tip.com/border-gradient

See Gradient borders with rounded corners by t_afif on CodePen.

And many more!

More CSS Tips

Select the last occurrence of an element in the whole document Select the last occurrence of any element in the whole document. October 31, 2024
Select the first occurrence of an element in the whole document Select the first occurrence of any element in the whole document. October 30, 2024
Inner display vs Outer display Learn the modern way to use the display property. October 16, 2024
Puzzle shapes using CSS mask A few lines of code to craft different puzzle shapes. October 09, 2024

How to correctly define a one-color gradient

The most optimized way to create a one-color gradient