CSS gradient and box-shadow generator.
Design a gradient background or a box shadow visually and copy ready-to-use CSS. Gradients can be linear or radial with up to four colour stops; shadows can be soft, sharp, inset or layered for a more natural look.
- Free, no sign-up
- Runs in your browser. Nothing you enter is sent to us.
How to use the CSS Gradient & Box-Shadow Generator
- Choose Gradient or Box shadow.
- Adjust the colours, angle and stops (or offset, blur and spread) and watch the preview.
- Copy the CSS.
- Paste it into your stylesheet, or into your page builder's custom CSS field.
Using gradients well
- Keep to two or three colours that sit near each other on the colour wheel. Very different colours often turn muddy in the middle.
- Use gradients for large surfaces, such as hero sections and banners, not body text.
- Check text placed on a gradient against both its lightest and darkest ends.
- Add a solid background-color before the gradient as a fallback.
Shadows that look natural
Real shadows are soft and slightly offset downwards, because light usually comes from above. A low-opacity shadow with plenty of blur reads as depth; a dark, hard shadow looks dated. Layering two shadows, one tight and one wide, gives the most realistic result. That's what the "Layered" option does.
Performance
CSS gradients and shadows are drawn by the browser, so they cost no extra download, unlike a gradient image. Very large blurred shadows on many elements can slow scrolling on low-end phones, so use them where they matter. Build your colours with the colour palette generator and check text readability with the colour contrast checker.
About the CSS Gradient & Box-Shadow Generator.
How do I add a CSS gradient background?
Copy the background line from the tool into your element's CSS, for example in a hero section's style.
What is the difference between linear and radial gradients?
A linear gradient changes colour along a straight line at an angle. A radial gradient spreads out from a centre point in a circle or ellipse.
Do gradients work in all browsers?
Yes. Linear and radial gradients without vendor prefixes work in every current browser.
What does spread do in a box shadow?
It grows or shrinks the shadow before blur is applied. Negative spread tucks the shadow under the element for a subtler effect.
Can I use this in WordPress or Elementor?
Yes. Paste the CSS into Additional CSS, or into an element's custom CSS field.
You might also need these.
Colour Palette Generator & Image Colour Picker
Pull a palette from any image, pick exact colours, or build harmonies from one brand colour.
Use the toolColour Contrast Checker
Check text and background colours against WCAG AA and AAA, and get the nearest colour that passes.
Use the toolSVG to PNG Converter
Convert SVG files or code to sharp PNG, JPG or WebP at any size, with a transparent or solid background.
Use the toolWant this done for you?
Free tools show you what to fix. We fix it, measure it, and keep it working while you run the business.