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.
#312E81
#1E40AF
#4F46E5
Generated CSS Variables
:root {
/* Colors */
--color-primary-50: #f4f4fb;
--color-primary-100: #e5e5f6;
--color-primary-200: #cccbec;
--color-primary-300: #a09edc;
--color-primary-400: #706dca;
--color-primary-500: #4642b8;
--color-primary-600: #36338e;
--color-primary-700: #2b2970;
--color-primary-800: #1f1e52;
--color-primary-900: #151438;
--color-primary-950: #0d0c22;
--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: #f2f2fd;
--color-accent-100: #e1e0fb;
--color-accent-200: #c3c1f6;
--color-accent-300: #908bee;
--color-accent-400: #5851e6;
--color-accent-500: #291fdb;
--color-accent-600: #1f18aa;
--color-accent-700: #191386;
--color-accent-800: #120e62;
--color-accent-900: #0c0a43;
--color-accent-950: #070628;
/* Semantic colors */
--color-background: #f4f4fb;
--color-surface: #e5e5f6;
--color-text: #0e0e25;
--color-text-muted: #403da9;
--color-border: #d3d2ef;
/* 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);
}- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is CSS Variable Generator really free?
Yes. CSS Variable Generator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does CSS Variable Generator upload my data?
No. CSS Variable Generator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and CSS Variable Generator is ready to use on desktop or mobile.
Does CSS Variable Generator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More design & visual
CSS Gradient Generator
Create linear CSS gradients with a live preview.
CSS Box Shadow Generator
Build and preview CSS box-shadow values with one-click copy.
CSS Glassmorphism Generator
Generate frosted-glass CSS with backdrop blur and copy-ready styles.
QR Code Generator
Generate custom QR codes for any text or URL.
WiFi QR Code Generator
Generate a scannable QR code to share WiFi credentials instantly.
Letter Profile Picture
Generate avatar images from initials with custom colors.