CSS Generator — Gradients & Box Shadows with Live Preview
Free online CSS generator: create linear and radial gradients or box shadows with live preview, then copy clean, standards-compliant CSS — runs 100% in your browser, nothing uploaded.
About CSS Generator (Gradient & Shadow)
Design CSS gradients and box shadows visually instead of hand-typing the syntax. Pick colors and stop positions, drag sliders for angle, offsets, blur, spread, and transparency, and watch a live preview update as you go. The generated CSS is plain, standards-compliant code you can paste into any project — and none of it ever leaves your browser.
How to use CSS Generator (Gradient & Shadow)
- Choose the Gradient or Box shadow tab.
- Adjust the controls — colors, stops, angle, offsets, blur, spread, transparency — and watch the live preview.
- Click Copy CSS and paste the result into your stylesheet.
About the generated CSS
Gradients
Linear gradients use an angle in degrees: 0deg points up, 90deg points right, and 135deg runs from top-left toward bottom-right. Radial gradients are generated with a circle shape centered in the element. Color stops keep the positions you set, so you can push colors toward either end of the gradient.
The output is a single background property supported by every modern browser — no vendor prefixes needed.
Box shadows
The box-shadow generator follows the standard order: horizontal offset, vertical offset, blur radius, spread radius, then color. Negative offsets move the shadow up or left, and a negative spread shrinks it. The transparency slider produces an rgba() color, and the inset option switches between a drop shadow and an inner shadow.
Frequently asked questions
Is this tool really free?
Yes — free with no account and no limits.
Does the generated CSS work in all browsers?
Yes. Both linear-gradient/radial-gradient and box-shadow are standard CSS supported by all modern browsers, so no vendor prefixes are needed.
Can I use more than two color stops?
Yes — add as many stops as you like, each with its own color and position from 0% to 100%.
What does the transparency slider do for shadows?
It sets the alpha channel of the shadow color, producing rgba() syntax — 100% is fully opaque, 0% makes the shadow invisible.
Is anything I design uploaded?
No. The generator runs entirely in your browser; the page even works offline once loaded.
Related tools
Age Calculator
Calculate exact age in years, months, and days, plus total days/weeks/hours lived and a next-birthday countdown.
runs locallyBase64 Encoder / Decoder
Encode text to Base64 or decode Base64 back to text, instantly in your browser.
WebAssemblyCLI / agentCase Converter
Convert text between UPPERCASE, lowercase, Title Case, camelCase, snake_case, and kebab-case.
WebAssemblyCLI / agentColor Converter
Convert colors between HEX, RGB, and HSL formats instantly.
WebAssemblyCLI / agentColor Palette Extractor
Extract the dominant colors from any image as a hex palette with percentage shares.
runs locallyCron Parser / Schedule Explainer
Translate any 5-field cron expression into plain English and see the next 10 run times — computed locally in your timezone.
runs locally