Design & Creative
Gradient and shadow builder
Design a background gradient or a soft shadow by eye and copy the CSS when it looks right.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
Gradient
Centre (% from left, % from top)
Colour stops
CSS
Box shadow
Shadow layers
CSS
Like this style?
Keep it with your brand colours, files and tasks in BeginRooms, so the whole team uses the same look. The 11-day trial needs no card, and this builder stays free.
How to use this tool
- Choose Gradient or Box shadow.
- Set the type, angle and colour stops, or pick a shadow preset and adjust its layers.
- Watch the preview update as you change each value.
- Copy the CSS into your stylesheet.
How it works
Writing gradients and shadows by hand means guessing numbers, saving and reloading until it looks right. Here you shape them on a live preview instead. For gradients, choose linear, radial or conic, set the angle or centre, and add, move, fade or recolour up to ten stops. For shadows, set the offset, blur, spread, colour and opacity, and stack up to eight layers for a softer, more natural look, inside or outside the box.
The CSS updates as you go and is ready to copy into your stylesheet, with no framework or class names. Start from a preset, adjust it until it fits your design, and copy. Everything runs in your browser, free and without an account. It is our own code; see the third-party notices for the software used elsewhere on these tools.
Frequently asked questions
What do I get to copy?
Plain CSS: a background value for gradients, and box-shadow plus border-radius values for shadows, ready for your stylesheet.
Can I use several shadows at once?
Yes. Add layers and each becomes part of one box-shadow value. Layered shadows usually look softer than a single heavy one.
Linear, radial or conic: which should I use?
Linear blends along a line at the angle you set, which suits backgrounds and buttons. Radial spreads out from a centre point, which suits spotlights and soft glows. Conic sweeps around a centre, which suits pie-style charts and colour wheels.
Will the CSS work in every browser?
Gradients and box shadows are standard CSS and work in current browsers without prefixes. Colours with opacity use the modern rgb() syntax.
Does it work on a phone?
Yes. The controls and preview fit smaller screens, though fine-tuning many stops is easier with a mouse.