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!