Main Content
The border radius uses --conditional-radius() which removes the radius when the element approaches viewport edges.
Demonstrations of CSS custom functions using the native @function rule.
The border radius uses --conditional-radius() which removes the radius when the element approaches viewport edges.
This card uses --smooth-shadow() for layered shadows and --glow() on hover.
Text size scales smoothly using --fluid-type() based on viewport width.
The grid layout uses --auto-grid() for responsive columns.
padding: --light-dark(0.75rem, 1rem);
box-shadow: --smooth-shadow(color, 8px, 2);
background: --shade(color, 10%);
The --text-on() function automatically chooses black or white text
for optimal readability using WCAG 2.1 contrast calculations.
#ffffff
#e0e7ff
#fbbf24
#3b82f6
#8b5cf6
#10b981
#ef4444
#6b7280
#1f2937
#000000
color: --text-on(var(--background-color));
/* Automatically picks black or white for best contrast */
Uses --negate() for transform and --glow() for shadow effect.
This section uses --light-dark() and --theme-color()
to automatically adapt to light/dark mode preferences.
Try switching your system theme to see the changes!