CSS Variables Generator

Manage your custom CSS variables

Design System Presets

Add Variable

Variable Name

Value

Filter by Category

Variables (6)

colors

spacing

typography

Generated CSS

:root {
  --primary-color: #F59E0B;
  --secondary-color: #3B82F6;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --font-size-base: 16px;
  --font-family: Inter, sans-serif;
}

Usage Example

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
}

.card {
  background-color: var(--secondary-color);
  border-radius: var(--spacing-sm);
}