background: linear-gradient(90deg, #7c3aed 0%, #10b981 100%);
About CSS Gradient, Box-Shadow & Radius Generator
Hand-writing CSS gradients, box-shadows, and rounded corners means guessing at numbers and reloading the page over and over. This CSS effects generator replaces that loop with visual controls and a live preview — adjust a color stop, drag an angle, or nudge a corner radius and watch the result update instantly, then copy clean, production-ready CSS.
It bundles three of the most common visual effects into one tool: a CSS gradient generator for multi-stop linear and radial fills, a box-shadow generator with stackable layers and inset support, and a border-radius generator with independent control of every corner.
Everything runs entirely in your browser. Nothing you design is uploaded or stored, so it works offline and keeps your work private.
Features
- Live preview that reflects every change instantly
- Multi-stop linear and radial gradients with adjustable angle
- Stackable box-shadow layers with x/y/blur/spread/color and inset
- Per-corner border-radius with shorthand output where possible
- One-click copy of clean, ready-to-paste CSS — fully offline
How to use
- Pick a tab: Gradient, Box-Shadow, or Border-Radius.
- Adjust the controls — color stops and angle, shadow offsets and color, or corner radii.
- Watch the live preview box update with the effect applied.
- Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
Does this CSS generator work offline?
Yes. The entire tool runs in your browser with no server calls, so once the page has loaded you can keep designing effects with the network unplugged. Nothing you create leaves your device.
How do I create a CSS gradient?
Open the Gradient tab, choose linear or radial, then add color stops and set each stop’s color and position. Drag the angle to control the direction. The live preview updates as you go, and the copyable output gives you a ready-to-paste background: linear-gradient(...) declaration.
What is the difference between a linear and radial gradient?
A linear gradient blends colors along a straight line whose direction you set with an angle in degrees. A radial gradient blends outward from a center point in a circle. This tool generates both from the same set of color stops.
How do I create an inner shadow with box-shadow?
Enable the inset option on a shadow layer. Inset shadows render inside the element instead of outside, which is useful for pressed buttons, input wells, and subtle depth. You can stack multiple layers, mixing inset and outer shadows.
Why does the border-radius output sometimes shorten to one value?
When all four corners share the same radius, the CSS collapses to a single value like 12px. When corners differ, the tool emits the four-value shorthand (top-left, top-right, bottom-right, bottom-left) so each corner is preserved.
Related tools
Everything runs locally in your browser — your input is never uploaded.