demo · v131

Gradients from currentcolor

CSS Relative Color Syntax lets linear-gradient() use currentcolor as its origin. Every gradient stop, border, shadow, and badge is derived from a single color value — no theme tokens, no Sass variables, no repetition.

Browser support not detected Your browser does not appear to support color: oklch(from currentcolor …). The demo below requires Chrome 131+ (or another browser that ships Relative Color Syntax with currentcolor). The cards will render but gradient derivation will fall back to static values.

Analytics

Real-time event tracking across all your properties. Unified view of user behaviour and conversion funnels.

98.4% uptime

Security

End-to-end encryption with zero-knowledge architecture. Automated threat detection and compliance auditing.

0 breaches

Performance

Edge-cached responses in under 50 ms globally. Adaptive throttling keeps p99 latency predictable at scale.

47 ms p99 latency

Derived values (from picked color)

Role Formula
Gradient start oklch(from currentcolor 0.95 0.04 h)
Gradient end oklch(from currentcolor 0.85 0.08 h)
Border oklch(from currentcolor 0.6 0.12 h)
Badge background oklch(from currentcolor 0.3 0.15 h)
Box-shadow oklch(from currentcolor 0.5 0.12 h / 0.25)

the code

/* Set a single color property on the wrapper */
.color-stage {
  color: #2563eb; /* ← only this changes per theme */
}

/* Every gradient stop derived from currentcolor */
.brand-card {
  background: linear-gradient(
    135deg,
    oklch(from currentcolor 0.95 0.04 h),  /* light tint */
    oklch(from currentcolor 0.85 0.08 h)   /* richer tint */
  );
  border: 2px solid oklch(from currentcolor 0.6 0.12 h);
  box-shadow: 3px 3px 0 oklch(from currentcolor 0.5 0.12 h / 0.25);
}

/* Dark badge from same hue */
.brand-badge {
  background: oklch(from currentcolor 0.3 0.15 h);
  color: white;
}

/* Feature detection */
@supports not (color: oklch(from currentcolor 0.9 0.05 0)) {
  /* fallback styles */
}

see also