CSS Variable Generator
Generate a complete CSS custom property theme. Pick your primary, secondary, and accent colors to get a full token set — color scales, spacing, radii, font sizes, and shadows.
#1A365D
#1E40AF
#FF6B35
Generated CSS Variables
:root {
/* Colors */
--color-primary-50: #f3f7fc;
--color-primary-100: #e3ebf7;
--color-primary-200: #c7d8ef;
--color-primary-300: #98b7e2;
--color-primary-400: #6492d3;
--color-primary-500: #3771c3;
--color-primary-600: #2b5897;
--color-primary-700: #224577;
--color-primary-800: #193358;
--color-primary-900: #11233c;
--color-primary-950: #0a1524;
--color-secondary-50: #f2f4fd;
--color-secondary-100: #e0e6fa;
--color-secondary-200: #c2cef5;
--color-secondary-300: #8ea4ec;
--color-secondary-400: #5576e2;
--color-secondary-500: #244ed6;
--color-secondary-600: #1c3ca6;
--color-secondary-700: #163083;
--color-secondary-800: #102360;
--color-secondary-900: #0b1841;
--color-secondary-950: #070e27;
--color-accent-50: #fdf4f1;
--color-accent-100: #fbe6df;
--color-accent-200: #f8cebf;
--color-accent-300: #f2a488;
--color-accent-400: #eb764c;
--color-accent-500: #e14e19;
--color-accent-600: #ae3d13;
--color-accent-700: #8a300f;
--color-accent-800: #65230b;
--color-accent-900: #451808;
--color-accent-950: #290e05;
/* Semantic colors */
--color-background: #f3f7fc;
--color-surface: #e3ebf7;
--color-text: #0b1728;
--color-text-muted: #3268b3;
--color-border: #cfdef2;
/* Spacing (4px base) */
--space-0: 0px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
--space-48: 192px;
--space-56: 224px;
--space-64: 256px;
/* Border Radius */
--radius-none: 0px;
--radius-sm: 2px;
--radius-DEFAULT: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 9999px;
/* Font Sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}