How it works

How it Works

1. 1Add one or more shadow layers using the "Add Layer" button.
2. 2For each layer, adjust X/Y offsets, blur, spread, and color with the sliders.
3. 3Toggle "Inset" to switch between outer drop shadows and inner shadows.
4. 4Use the Light / Dark / Checkered background toggles to preview your shadow in different contexts.

Code Outputs

box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);

shadow-[0_10px_40px_-10px_rgba(0,0,0,0.08)]

@theme { --shadow-custom: ... }
@layer base { :root { --shadow-color-1: ...; } .dark { --shadow-color-1: ...; } }

How it Works

1. 1Enter any hex color code or click the color swatch to open the native color picker.
2. 2Give your color a name (e.g., "primary", "forest") — this becomes your Tailwind token name.
3. 3The scale is generated instantly using the OKLCH or HCT color model for perceptual uniformity.
4. 4Click any swatch to copy the hex value.

Code Outputs

:root { --color-primary-500: #3b82f6; ... }

@theme { --color-primary-500: oklch(...); }

How it Works

1. 1Paste any raw CSS block (single rules or full selector blocks with { }) into the editor.
2. 2The converter parses every CSS declaration using a comprehensive lookup table.
3. 3Recognized properties are converted to standard Tailwind classes. Unrecognized values use Tailwind's arbitrary value syntax (e.g., text-[14px]).
4. 4Click "Load Example" to see a real-world card component conversion.

Code Outputs

flex flex-col p-6 bg-white rounded-2xl shadow-md w-full max-w-[24rem]

How it Works

1. 1Paste your existing tailwind.config.js or tailwind.config.ts content into the left panel.
2. 2The converter reads your theme.extend.colors, fonts, spacing, and more.
3. 3Each token is remapped to the new Tailwind v4 CSS variable format.
4. 4Copy the output and paste it into your globals.css @theme block.

Code Outputs

@theme {
  --color-brand: #3b82f6;
  --font-sans: "Inter", sans-serif;
  --spacing-lg: 2rem;
}

How it Works

1. 1Pick your glass surface background color using the color picker.
2. 2Adjust the backdrop blur level (affects the frosted appearance).
3. 3Control background opacity and border opacity independently.
4. 4Toggle light / dark backgrounds to test legibility in different modes.

Code Outputs

background: rgba(255,255,255,0.15);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.2);

bg-white/15 backdrop-blur-xl border border-white/20

How it Works

1. 1Browse the preset library (fadeIn, slideUp, pulse, shake, etc.) or click "Custom" to build from scratch.
2. 2Adjust duration, delay, easing, and iteration count using the sliders.
3. 3The live preview shows the animation running in real-time on the example element.
4. 4Export as a CSS @keyframes block or as a Tailwind v4 animation token.

Code Outputs

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@theme { --animate-fade-in-up: fadeInUp 0.4s ease-out; }

How it Works

1. 1Select a base font size (usually 16px / 1rem) and a scale ratio (e.g., 1.25 = Major Third).
2. 2The generator computes every step — from xs to 9xl — using the formula: step × ratio^n.
3. 3Preview the full scale with real text rendered at each size.
4. 4Export as Tailwind v4 --font-size-* variables.

Code Outputs

@theme {
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.563rem;
}

How it Works

1. 1Pick a base background color — neumorphic shadows are calculated by lightening and darkening this exact color.
2. 2Choose a shape: Flat, Concave, Convex, or Pressed (inset).
3. 3Drag the light source angle dial to control where shadows are cast.
4. 4Enable "Multi-Shadow Engine" for additional depth layers.

Code Outputs

background: #e0e5ec;
box-shadow: 20px 20px 40px #b8bec7, -20px -20px 40px #ffffff;

@theme { --neuro-shadow: var(--neuro-shadow-1), var(--neuro-shadow-2); }
@layer base { :root { ... } .dark { ... } }

How it Works

1. 1Choose a gradient type: Linear, Radial, or Conic.
2. 2Add color stops by clicking on the gradient bar.
3. 3Drag stops to reposition them or click to change their color.
4. 4Adjust the angle for linear gradients.

Code Outputs

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

bg-[linear-gradient(135deg,_#667eea_0%,_#764ba2_100%)]

How it Works

1. 1Pick a shape preset (polygon, circle, ellipse, inset) or start from scratch.
2. 2Drag the control handles to reshape the clip region.
3. 3The live preview shows exactly how the shape clips the element.
4. 4Switch between "CSS clip-path" and "Tailwind arbitrary" output.

Code Outputs

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

[clip-path:polygon(50%_0%,100%_100%,0%_100%)]