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.
/* CSS — drop-shadow vs box-shadow */
/* box-shadow: rectangular — ignores transparency */
.logo-box { box-shadow: 4px 4px 8px rgba(0,0,0,0.3); }
/* drop-shadow: follows the element's shape */
.logo-drop { filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)); }
/* Colored drop shadow on transparent PNG */
.icon { filter: drop-shadow(0 4px 6px rgba(59,130,246,0.5)); }
/* Layered glow effect */
.glow {
filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #3b82f6);
}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
JSON to GraphQL Schema
Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download
HTTP Request Builder
Build HTTP requests visually and generate code in cURL, JavaScript, Python, Go, Rust, and PHP — lightweight Postman/ReqBin alternative
HTML Table Generator
Build HTML tables visually with an interactive editor — add rows, columns, header rows, captions, and styling. Export as plain HTML, inline CSS, or Tailwind classes
CSS Clip-path Generator
Create CSS clip-path shapes visually — circle, ellipse, inset, or polygon with draggable points. 13 shape presets, interactive preview, and production-ready CSS output