UUID generator
Generate random UUIDs in bulk.
CSS box shadow generator
Shape a shadow with sliders, stack several layers and copy the CSS.
Your files stay on your device
How it works
- 1Move the sliders for offset, blur and spread.
- 2Choose a colour and opacity. Tick Inset for an inner shadow.
- 3Add layers to build a softer, more natural shadow.
- 4Copy the CSS.
What the options do
- Offsets
- Horizontal and vertical distance of the shadow from the box. Negative values go left and up.
- Blur
- How soft the edge is. Zero gives a hard edge.
- Spread
- Grows or shrinks the shadow before blurring. A negative spread keeps a big blur from spilling out the sides.
- Inset
- Draws the shadow inside the box, like a pressed-in field.
- Layers
- Several shadows are drawn together. Two or three subtle layers look more natural than one heavy one.
Privacy
Everything runs in your browser. Nothing you type is sent to a server.
Questions people ask
Why use more than one shadow layer?
Real shadows are sharp near the object and soft far away. A small tight shadow plus a large soft one imitates that, which looks more refined than a single blur.
Does a box shadow follow rounded corners?
Yes, it follows the border-radius of the element. The radius slider shows this and is included in the copied CSS.
Will large blurs slow the page down?
A few static shadows are fine. Many large blurred shadows, or animating them, can be costly on weak phones. Animate opacity of a pseudo-element instead.
What is the difference from drop-shadow()?
box-shadow follows the rectangular box. The filter drop-shadow() follows the visible shape, including transparent PNG and SVG edges.
Can I use the output in Tailwind or other tools?
The value after box-shadow: is plain CSS. In Tailwind, put it in an arbitrary value, replacing spaces with underscores.