Scanner Tools

CSS Generator

Three quick visual builders — shadows, rounded corners, and gradients — with copy-ready CSS.

Preview

Generated CSS 

box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);

Need more depth? Try the dedicated Box Shadow, Gradient, or Flexbox generators.

Frequently asked questions

What does this CSS generator make?

It has three visual builders in one page — box-shadow, border-radius, and gradient — each with a live preview and a copy-ready CSS snippet. Switch between them using the tabs at the top.

How do I set a shadow color with transparency?

Pick the color, then drag the Alpha slider (0 to 1) to set opacity. The output is emitted as an <code>rgba()</code> value, e.g. <code>box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15)</code>.

Can I round each corner separately?

Yes. In the Border radius tab, switch from Uniform to Per corner mode to control top-left, top-right, bottom-right, and bottom-left independently. There are also presets like Card, Round, and Pill.

Is my work sent anywhere?

No. Everything runs in your browser — nothing is uploaded. For more options, dedicated Box Shadow, Gradient, and Flexbox generators are linked below.

Related tools