How to Generate CSS Gradients, Box Shadows and Border Radius Rules in One Studio
Learn how to set linear, radial or conic gradient stops, shape a box-shadow with offset, blur, spread and opacity, and round each corner separately.
Gradient & Shadow Studio
Introduction
Gradients, shadows and corner radii are the three properties most often tweaked by trial and error in browser devtools. The Gradient & Shadow Studio puts all three behind sliders and color pickers with a live preview square, so the values are chosen visually and copied as finished CSS. Everything runs in the browser.
Step-by-Step Instructions
- Open the CSS Gradient Generator tab and choose a Gradient Style of Linear, Radial or Conic.
- Pick the two color stops with the color pickers or type hex values, drag Angle / Rotation (0 to 360) for linear and conic, and tick Add 3rd Color Stop if a middle color is needed.
- Switch to Box Shadow Generator and set Horizontal Offset (-50 to 50px), Vertical Offset, Blur Radius (0 to 100px), Spread Radius (-30 to 50px), Shadow Opacity and Shadow Color, ticking Inset Shadow for an inner shadow.
- Switch to Border Radius Studio and drag Top-Left, Top-Right, Bottom-Right and Bottom-Left Corner from 0 to 100px.
- Press Copy CSS under Generated CSS Code on whichever tab is active to copy that tab's rule.
Key Use Cases
- Hero Backgrounds: Build a three-stop linear gradient and copy it as a single background rule.
- Card Elevation: Set a low-opacity colored shadow with negative spread for a soft floating card.
- Asymmetric Shapes: Round only two corners of a chat bubble or tab using the per-corner sliders.
Frequently Asked Questions
Where is the third color placed in the gradient?
When Add 3rd Color Stop is ticked, the third color is inserted between the first and second, so the output reads color1, color3, color2. The stops have no explicit percentages; the browser spaces them evenly.
Why is the Angle slider missing on radial gradients?
Radial gradients in this tool are always written as radial-gradient(circle, ...) with no direction, so the Angle / Rotation control is hidden for that style. It reappears for linear and conic, where it becomes the deg value in the rule.
How is the shadow color written in the output?
The picked hex color and the Shadow Opacity percentage are combined into an rgba() value, for example rgba(79, 70, 229, 0.40). The box-shadow rule then lists offset X, offset Y, blur, spread and that rgba color, with the inset keyword first when the checkbox is ticked.