Tailwind CSS Generator – Create Shadows, Gradients & UI Styles

How to Use the Generator

1. Pick a tab: Shadow, Gradient or Border Radius.
2. Adjust the sliders and colours. The preview box updates as you change them.
3. Copy the CSS line or the Tailwind class string with the Copy button next to it, and paste it into your component.

• Shadow: X and Y offset (−50 to 50 px), blur (0 to 100 px), spread (−20 to 50 px), colour and opacity. One shadow at a time.
• Gradient: linear or radial, a direction for linear gradients, and from, optional via, and to colours.
• Border radius: one value for all corners (0 to 100 px), or each corner separately.

What the Generated Classes Look Like

With the default settings, the Tailwind output is:

Shadow:        shadow-[4px_4px_12px_0px_rgba(6,214,160,0.30)]
Gradient:      bg-gradient-to-r from-[#06d6a0] to-[#118ab2]
Border radius: rounded-[12px]

The values in square brackets are Tailwind arbitrary values, which generate a class for any value that isn't in your theme. Inside the brackets, Tailwind turns each underscore into a space, so 4px_4px_12px becomes 4px 4px 12px in the CSS.

Limitations to Check

• Gradient direction: the CSS output follows the direction and type you choose, but the Tailwind class always uses bg-gradient-to-r (left to right). For another direction, change the class, for example to bg-gradient-to-b, or use the CSS output. For radial gradients, use the CSS output.
• Tailwind v4: the shadow and radius classes use arbitrary values, which work in Tailwind v3 and v4. The gradient class uses the v3 name; Tailwind v4 documents bg-linear-to-r instead.
• One layer: for layered shadows, generate each layer and combine the CSS values yourself.

Check text contrast after adding strong shadows or gradients behind text, and browse more free developer tools.