CSS Gradient Generator
Build linear, radial and conic CSS gradients visually with multiple colour stops and copy production-ready code.
CSS Box Shadow Generator
Design soft, natural box shadows with up to four layers and a live preview, then copy the CSS.
How to use
- Start from a preset or adjust offset, blur, spread, colour and opacity.
- Add layers for more realistic depth; select a layer to edit it.
- Copy the box-shadow declaration into your stylesheet or Elementor custom CSS.
What this tool does
It writes a valid CSS box-shadow value, combining layers with commas in the order shown.
Why it matters
Several low-opacity layers usually look more natural than one dark shadow, because real shadows are soft and spread out with distance.
Tips
- Match the shadow colour to the background hue rather than pure black for a cleaner look.
- Large blur values on many elements can affect scrolling performance on low-end devices.
Frequently asked questions
How do I use this in Elementor?
Elementor's Box Shadow control supports one layer. For layered shadows, paste the CSS into the widget's Custom CSS (Pro) or a class in your theme stylesheet.
Related tools
CSS Border Radius Generator
Adjust each corner of a box with sliders, in px or %, and copy the shortest border-radius CSS.
Color Palette Generator
Create complementary, analogous, triadic and monochromatic palettes from one colour, plus a full 50–950 shade scale, and export…
REM to PX Converter
Convert rem values to pixels for any root font size, with a quick reference table.
PX to REM Converter
Convert pixels to rem instantly with any base font size, see a reference table, or convert every px…
CSS Beautifier & Formatter
Turn minified or messy CSS into readable, consistently indented code with one declaration per line.
CSS Minifier
Minify CSS by removing comments and unnecessary whitespace, and see exactly how many bytes you save.
CSS Clamp Generator (Fluid Typography)
Generate a CSS clamp() value that grows smoothly from a minimum size on small screens to a maximum…