DarnlyCSS gradients and shadows, with a live preview
Build a gradient or a soft, realistic box shadow and see it on a real card and button as you go. Copy it as CSS, as a Tailwind class, or as a prompt for your AI coding agent.
This card shows the gradient as a header picture and on a button.
Get startedDrag the circles to move colors. Click the bar to add one.
Tailwind v4 utilities allow up to three colors in the middle of the page. Use the class above for this one.
This card and the button below use your shadow.
More free tools
How it works
- Pick a preset, or build your own: drag the color stops on the bar, click the bar to add a stop, and choose linear, radial or conic.
- Switch to “Box shadow” for soft, layered shadows. Move the sliders and watch the card and button change.
- Copy the CSS, the Tailwind class, or a prompt that tells your AI coding agent where to use it.
Questions
What’s the difference between linear, radial and conic?
Linear blends along a straight line, like a sky. Radial spreads out from a point, like a spotlight. Conic sweeps around a point, like the hands of a clock, which is handy for pie charts and color wheels.
Why is there no purple-to-blue default?
Purple-to-blue gradients are so common in AI-built sites that people now read them as “made by AI without a designer”. Our presets lean warmer and calmer so your site looks like yours.
What does “Smooth blend” do?
Some color pairs, like orange to blue, turn grey in the middle. Smooth blend mixes the colors in OKLCH, a color space built around how people see color, so the middle stays bright. It works in every current browser.
Why do layered shadows look better?
Real shadows are dark and sharp close to an object and soft and faint further away. One CSS shadow can’t do both, so we stack a few, each one bigger and fainter than the last.
Which Tailwind class should I use?
The arbitrary class, like bg-[linear-gradient(...)], works in Tailwind v3 and v4 and matches the CSS exactly. The v4 utilities, like bg-linear-135 from-… to-…, are easier to read but only exist in Tailwind v4 and allow at most three colors.
Is anything uploaded?
No. Everything runs in your browser.