CSS Gradient & Box-Shadow Generator
Your data never leaves your browserGenerate linear, radial, and conic CSS gradients and layered box-shadows with a live preview. Copy ready-to-use CSS.
Gradient type
Color stops
Preview
CSS output
Share this tool
Found it useful? Help a fellow developer discover it.
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 offers angle control. Radial-gradient offers shape and position options. Conic-gradient sweeps colors for color wheel 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. You can mix inset and drop shadows. You can also 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
CSS Formatter
Format, beautify, and minify CSS code online. Shows byte reduction percentage on minify.
HEX / RGB / HSL Color Converter
Convert colors between HEX, RGB, and HSL formats instantly.
WCAG Color Contrast Checker
Check WCAG 2.1 contrast ratios for AA and AAA, normal and large text. Live preview plus accessible color suggestions.
Image to Base64
Convert PNG, JPG, GIF, WebP, SVG, and BMP to Base64. Output as raw string, CSS background-image, or HTML <img> tag. Drag & drop.