Developer Tools

CSS Theme Generator

Build custom CSS themes with live preview and color pickers

Color Palette

Choose your theme colors

Primary Color

Secondary Color

Background Color

Text Color

Generated CSS

:root {
  /* Primary Colors */
  --color-primary: #3b82f6;
  --color-primary-light: #3b82f620;
  --color-primary-dark: #3b82f6;

  /* Secondary Colors */
  --color-secondary: #8b5cf6;
  --color-secondary-light: #8b5cf620;

  /* Background */
  --color-background: #ffffff;

  /* Text */
  --color-text: #1f2937;
  --color-text-muted: #1f293799;

  /* 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);
}

Live Preview

Preview Heading

This is how your text will look with the selected colors.

Highlighted Content

This shows how highlighted sections will appear.