Free CSS Gradient & Box-Shadow Generator
Design CSS gradients and box shadows with a live preview and copy the generated CSS, directly in your browser.
Processed in your browser. Nothing is uploaded.
How to generate CSS
- Choose Gradient or Box shadow mode.
- Adjust the colors, angle, or shadow settings.
- Watch the live preview update instantly.
- Select Copy CSS and paste it into your stylesheet.
What this supports
The gradient generator supports linear, radial, and conic gradients with up to three color stops. The box-shadow generator supports offset, blur, spread, color with opacity, and inset shadows, all rendered with a live preview so you can see exactly what you're copying.
Common use cases
- Design a background gradient for a website section
- Create a soft drop shadow for a card or button
- Quickly copy ready-to-use CSS without writing it by hand
Frequently asked questions
Is this CSS generator free?
Yes. It is completely free, with no signup and no limits.
Is anything I design uploaded anywhere?
No. Everything is generated entirely in your browser and never sent to Inqita or stored.
What gradient types are supported?
Linear, radial, and conic gradients, each with up to three color stops.
Can I generate a box shadow instead of a gradient?
Yes. Switch to Box shadow mode to design an offset, blurred, or inset shadow with a live preview.
Will the generated CSS work in all browsers?
Yes. It generates standard CSS gradient and box-shadow syntax supported by all current browsers.