Image Shadow Generator
box-shadow or drop-shadow on images with a copyable CSS snippet.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this image shadow generator
- Pick a mode: `box-shadow` for a rectangular shadow (with optional border-radius) or `filter: drop-shadow` for a transparency-aware shadow that follows the image alpha.
- Optionally upload a PNG/JPG/WebP — it stays in your browser, never uploaded anywhere.
- Set X offset, Y offset, blur (and spread in box-shadow mode) in pixels, plus a color in hex or rgba.
- Pick a border radius (box-shadow mode) and a backdrop color so you can see how the shadow reads.
- Press Generate CSS and Copy CSS to grab the declaration for your stylesheet.
About this image shadow generator
The image shadow generator handles the two CSS techniques you need for image shadows. `box-shadow` paints a rectangular shadow around the bounding box of an `<img>`, which is perfect for solid photos but ignores PNG/SVG transparency. `filter: drop-shadow` follows the image’s alpha channel, so a logo with transparent background gets a shadow that hugs the actual shape. The tool emits whichever declaration you select, with a live preview that updates as you type — the preview lives at the top so it paints first and stays the LCP element.
Worked example: keep mode `box-shadow`, X=0, Y=16, blur=32, spread=-8, color=#00000059, border radius=12. The output is `box-shadow: 0px 16px 32px -8px #00000059;\nborder-radius: 12px;` — the soft floating-card look used on hero images. Switch mode to `filter` and the same offsets produce `filter: drop-shadow(0px 16px 32px #00000059);` which hugs the alpha of a transparent PNG logo. Upload an image to see the difference: box-shadow always frames a rectangle, drop-shadow traces the alpha outline.
FAQ
- When should I use `box-shadow` vs `filter: drop-shadow`?
- Use box-shadow for solid, rectangular images where you want a predictable rectangular shadow (with a spread value and optional border-radius). Use filter: drop-shadow when the image has transparency — PNG logos, SVG icons — so the shadow follows the visible shape rather than the box.
- Does filter: drop-shadow take a spread value?
- No — drop-shadow is a subset of box-shadow. It accepts offset-x, offset-y, blur-radius, and color, but has no spread parameter. If you need spread, use box-shadow.
- Why does my drop-shadow look pixelated?
- drop-shadow is rendered as part of the GPU filter pipeline and can clip to the element’s painting box. Add some CSS padding or a wrapper with breathing room so the shadow has space to render fully, especially at large blur values.
- Does the uploaded image leave my browser?
- No. The file is read with FileReader and used only for the preview in your browser. Nothing is uploaded to a server.
- How do I get a colored or neon glow on a logo?
- Use filter mode with a saturated, semi-transparent color like `rgba(99, 102, 241, 0.6)` or `#6366f199`. Crank blur to 24–48 px and set offsets to 0 for a balanced glow that follows the logo’s alpha.