Generate 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.
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.
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.
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.
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.
Yes. Every color stop and shadow layer has an opacity control. The output uses rgba() so partial transparency works correctly in all modern browsers.
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.
No. All CSS generation happens in your browser. Nothing is sent to a server.
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.
