How do I generate a CSS linear gradient?

Pick two or three colors, adjust the angle, and copy the generated background CSS. You can preview the result live before using it.

Can I use this box-shadow generator for free?

Yes. The generator runs entirely in your browser with no signup and generates standard CSS you can paste into any project.

Create beautiful CSS gradients and box shadows with a live preview, then copy the ready-to-use CSS code. Free, no signup.

Color 1

#6366f1

Color 2

#ec4899

Use a third color

Angle 135°

Presets

background: linear-gradient(135deg, #6366f1, #ec4899);

A soft elevated card shadow, popular in modern UI design:

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

Use the gradient tab to pick colors and an angle, then copy the generated background: linear-gradient(...) rule.

Adding inset draws the shadow inside the element instead of outside, creating a recessed or embossed look.

Yes. The output is standard CSS that is yours to use in any personal or commercial project, with no attribution.

From internal tools to full platforms — we deliver end to end.

Was this tool useful?

Runs in your browser — nothing is uploaded.