Color shades using color-mix()

March 28, 2023

Use the new color-mix() to create different shades from one color.

Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color

3 color shades from one color

html {
  --color: #8A9B0F; /* the main color */
  --color-light: color-mix(in srgb,var(--color),#fff 25%);
  --color-dark:  color-mix(in srgb,var(--color),#000 25%);
}

See the Pen Color shades using color-mix() by Temani Afif (@t_afif) on CodePen.

More CSS Tips

A color wheel with gradient Use the new color interpolation to create a color wheel using conic-gradient(). April 03, 2023
Fade content inside border using mask Use CSS mask to fade your content inside border. March 30, 2023
CSS shapes: Polygon & Starburst Use online geneartors to create Polygon and Starburst shapes using clip-path. March 08, 2023
CSS-only gradient shadows Use an online tool to generate your gradient shadow. February 10, 2023