Effects & Animation

CSS Variables

Custom properties (CSS variables) let you store a value once and reuse it everywhere. Change it in one place and the whole site updates.

Syntax:

:root {
  --brand: #1c6fa8;
  --radius: 12px;
  --space: 16px;
}

.button {
  background: var(--brand);
  border-radius: var(--radius);
  padding: var(--space) calc(var(--space) * 2);
}

Dark mode with variables

:root { --bg: #ffffff; --text: #111111; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1720; --text: #e5e7eb; }
}

body { background: var(--bg); color: var(--text); }