Gradient & shadow maker
Drag to build a CSS gradient or box shadow, then copy the CSS or the Tailwind class.
Type
Blend colors in
Color stops
Click the bar to add a stop. Drag a stop, or focus it and use the arrow keys (Shift for 10). Delete removes it.
Presets
Copy it
CSS
background-image: linear-gradient(90deg in oklch, #4f46e5 0%, #ec4899 100%);
Tailwind class
bg-[linear-gradient(90deg_in_oklch,#4f46e5_0%,#ec4899_100%)]
The Tailwind class is a v4 arbitrary value: spaces become underscores. The link in the address bar keeps this design.
- #design
- #css
- · runs in your browser
Try next
- Color paletteTurn one color into a full 50-950 scale and matching harmonies, then export it as CSS or Tailwind.
- Contrast checkerCheck two colors against WCAG AA and AAA, and get the nearest color that passes.
- Social card makerDesign a 1200×630 share image with a title, colors and your logo, then download it as a PNG.