CSS Gradient & Box-Shadow Generator

Your data never leaves your browser

Generate linear, radial, and conic CSS gradients and layered box-shadows with a live preview. Copy ready-to-use CSS.

Gradient type

135

Color stops

0%
100%

Preview

CSS output

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

Share this tool

Found it useful? Help a fellow developer discover it.

https://developertoolkit.dev/tools/css-gradient

Visual CSS generation without guessing

Writing CSS gradients and box-shadows by hand means running the browser, tweaking a number, reloading, and repeating. A visual generator collapses that loop into a single live-updating panel. Adjust any parameter and the preview reflects it instantly. When the result looks right, copy the single-line declaration. The gradient tab covers all three CSS gradient functions: linear-gradient with angle control, radial-gradient with shape and position options, and conic-gradient for sweeping color wheels and pie-style effects. Every gradient supports unlimited color stops, each with an independent color and position. The box-shadow tab lets you stack multiple shadow layers, mix inset and drop shadows, and control alpha so shadows can be semi-transparent.

Supported gradient and shadow types

Linear gradient

Transitions colors along a straight line at any angle. Use it for directional backgrounds, button fills, and text underlines.

Radial gradient

Radiates colors outward from a center point. Ellipse and circle shapes with configurable position let you create spotlight and halo effects.

Conic gradient

Sweeps colors around a central point like a color wheel. Great for pie charts, progress rings, and color pickers.

Box-shadow layers

Stack multiple shadows with independent offset, blur, spread, color, and inset controls. Combines into a single comma-separated value.

Frequently Asked Questions

What gradient types are supported?

Linear, radial, and conic gradients, each with multiple color stops. Linear gradients support any angle. Radial gradients have shape (ellipse or circle) and position controls. Conic gradients use the starting angle.

Can I stack multiple box-shadows?

Yes. Add as many shadow layers as you need, then adjust each one independently. The tool combines them into a single comma-separated box-shadow value you can paste straight into your stylesheet.

Does it support transparency?

Yes. Every color stop and shadow layer has an opacity control. The output uses rgba() so partial transparency works correctly in all modern browsers.

Is the CSS production-ready?

Yes. The output uses standard CSS with no vendor prefixes. Linear, radial, and conic gradients are supported in all modern browsers without prefixes. You can paste the declaration directly into a stylesheet.

Does anything upload?

No. All CSS generation happens in your browser. Nothing is sent to a server.

Related Tools