CSS Color Mix Function

Blend colors dynamically using CSS color-mix function for creating tints shades and opacity variants at runtime.

CssConfig ManagementUpdated: 2025-01-15

Code

:root { --brand: #4f46e5; }

.button {
  background: var(--brand);
  border: 2px solid color-mix(in srgb, var(--brand) 80%, black);
}

.hover-bg {
  background: color-mix(in srgb, var(--brand) 90%, white);
}

Related Examples

CSS Backdrop Filter Glass Effect
CSS Calc for Dynamic Sizing
CSS Clip Path Shapes
CSS Container Queries
CSS Custom Scrollbar Styling

Report a problem with this exampleOpens a pre-filled issue on GitHub.