accent-color: styling native form controls
The accent-color property tints native checkboxes, radio buttons, range sliders, and progress bars to match your brand — one line of CSS.
backdrop-filter: frosted glass and blur effects
Create frosted glass, blur overlays, and glassmorphism effects with backdrop-filter. Covers blur, brightness, contrast, and performance considerations.
box-shadow: the complete reference
Every box-shadow technique: layered shadows, OKLCH colors, elevation systems, and performance tips.
Building design-system palettes in OKLCH
Create consistent, accessible color palettes using OKLCH — from primary scales to semantic tokens.
color-mix(): blending colors in CSS
Learn color-mix(): syntax, color spaces, percentage control, practical uses for hover states and alpha blending, and design token patterns.
Conic gradients: pie charts and color wheels
Build pie charts, progress rings, and color wheels using conic-gradient() — no SVG or canvas needed.
CSS gradients: linear, radial, conic
Master all three CSS gradient types with color stops, repeating patterns, hard stops, and smooth interpolation in oklch color space.
CSS custom properties (variables)
Master CSS custom properties: var() with fallbacks, inheritance, @property typed variables, and component token patterns.
Gradient borders
Three techniques for gradient borders — border-image, background-clip trick, and mask-based approaches.
Gradient text with background-clip
Create gradient-colored text using background-clip: text and linear-gradient — the technique, its gotchas, and accessible alternatives.
OKLCH from scratch: lightness, chroma, hue
A complete guide to the oklch() color function — how lightness, chroma, and hue work together for perceptually uniform colors.
OKLCH and modern color
Perceptually uniform colors and light-dark() for design systems in 2026.
prefers-color-scheme: auto-detecting dark mode
How to detect and respond to the user's system color preference with CSS. Dark mode without JavaScript.
@property: typed custom properties
Register custom properties with @property for type checking, initial values, and animatable color transitions.
Relative color syntax: deriving colors dynamically
Use CSS relative color syntax to create hover states, tints, and shades from a single base color — no preprocessor needed.
Shadows in dark mode: adjusting for dark backgrounds
Why box-shadow values from light themes look wrong on dark backgrounds, and how to fix them with oklch and layered shadows.
The light-dark() function
Use the CSS light-dark() function to define theme-aware values in a single declaration — simpler than media queries.