CSS Variable Generator

Create custom CSS properties for your design system

Colors

primary

secondary

accent

success

warning

error

info

Spacing

xs0.25rem

sm0.5rem

md1rem

lg1.5rem

xl2rem

2xl3rem

Typography

xs0.75rem

sm0.875rem

base1rem

lg1.125rem

xl1.25rem

2xl1.5rem

3xl2rem

Border Radius

none0rem

sm0.125rem

md0.375rem

lg0.5rem

fullfull

Shadows

Live Preview

Buttons

Cards

Card Title

Card content with custom styling

Secondary Card

Another card with different style

Typography

Heading 1 - 3xl

Heading 2 - 2xl

Heading 3 - xl

Large text - lg

Body text - base

Small text - sm

Extra small - xs

Badges

PrimarySuccessWarningErrorInfo

Generated CSS

:root {

  /* Colors */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-accent: #8b5cf6;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;

  /* Border Radius */
  --radius-none: 0rem;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

Loading tool...