CSS Gradient Generator

Build a linear gradient with angle and 2–3 color stops. Preview live and copy the CSS.

Angle (deg)

Stop 1

Stop 2

Stop 3 (optional) Use 3rd stop

CSS

Preview

Example

linear-gradient(135deg, #10b981 0%, #0ea5e9 100%)

Yes. Everything runs in your browser with no server calls.

This tool supports two or three stops. Edit the copied CSS to add more.

Design CSS box-shadows with offsets, blur, spread, and inset.

Generate fluid clamp() values for responsive font sizes.

Tweak blur, brightness, contrast, and more; copy the filter CSS.