CSS Drop Shadow Generator
Create CSS drop-shadow() filter effects visually. Unlike box-shadow, drop-shadow follows an element's actual shape — perfect for PNGs with transparency, SVGs, and clipped elements. All processing is client-side.
CSS Box Shadow Generator
Design beautiful CSS box shadows visually. Add multiple layers, adjust offsets, blur, spread, and copy the CSS.
Shadow Layers (1)
CSS Output
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
Presets
About CSS Box Shadows
The box-shadow property adds shadow effects around an element. The syntax is: x-offset y-offset blur spread color.
Offsets (X/Y) control the shadow's position. Positive X moves right, positive Y moves down. Negative values move left and up.
Blur softens the shadow edges. Higher values create a more diffused shadow. A value of 0 creates a sharp shadow.
Spread expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.
Inset changes the shadow from outer to inner, creating a pressed/recessed effect.
Multiple shadows can be stacked for realistic depth. Layer subtle shadows for a natural look — this mimics how light creates multiple soft edges in the real world.
What is CSS drop-shadow?
CSS filter: drop-shadow() creates a shadow that follows the actual rendered shape of an element, including transparency. Unlike box-shadow, which always creates a rectangular shadow matching the element's box, drop-shadow traces the alpha channel of images, the outlines of SVGs, and the visible shape after clip-path is applied. This makes it the right choice for non-rectangular elements.
Common use cases
Drop-shadow is ideal for adding shadows to PNG images with transparent backgrounds, SVG icons and illustrations, elements with clip-path applied, and CSS shapes. It is commonly used for product images on e-commerce sites, icon sets, logo treatments, and any design element where the shadow needs to follow a complex or irregular outline rather than a rectangle.
Frequently Asked Questions
What is the difference between box-shadow and drop-shadow?
box-shadow creates a rectangular shadow based on the element's box model. drop-shadow (via the filter property) follows the actual rendered shape, respecting transparency and clip paths. Use box-shadow for rectangular elements and drop-shadow for irregular shapes.
Can I use inset with drop-shadow?
No. The drop-shadow() filter does not support the inset keyword. If you need an inner shadow, use box-shadow with the inset value instead.
Related Generate Tools
robots.txt Generator
Generate robots.txt files with crawl rules for Googlebot, Bingbot, AI bots, and more — presets included
Zod Schema Generator
Generate Zod validation schemas from JSON — auto-detects emails, URLs, UUIDs, dates, and nested objects
Placeholder Image Generator
Generate custom placeholder images for wireframes, mockups, and prototyping with custom dimensions and colors
Nginx Config Generator
Generate nginx configuration files — server blocks, SSL, reverse proxy, gzip, load balancing, and security headers