The CSS filter: drop-shadow() function creates a shadow that follows the actual rendered outline of an element, including transparent areas of PNG images and complex SVG paths.
Loading Filter Effects Builder…
Live preview of filter: drop-shadow() following element shape outlines
Works correctly on PNG with transparency and SVG paths
Explicit comparison context with box-shadow behaviour
Copy-ready filter declaration for icons and irregular shapes
Drop the Filter Effects Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Filter Effects Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
The box-shadow property applies a shadow to the CSS box model of an element, which is always rectangular and follows the border radius rather than the actual visible content. For any img element containing a PNG with a transparent background, the box-shadow produces a rectangular shadow around the image file dimensions, not the visual content within it. A star shaped icon, a circular avatar with a square PNG container, or a die cut product photograph renders with a rectangular shadow that completely misrepresents the visible shape and instantly reads as broken to anyone who notices it. The filter: drop-shadow() function operates differently: it processes the composited pixel output of the element, identifies non transparent pixels using the alpha channel of the rendered output, and generates a shadow from those pixels alone. The result is a shadow that traces the actual shape of the visible content, whether that is a star, a custom logo mark, an irregular SVG path, or text with unusual decorative letterforms.
The syntax for drop-shadow is filter: drop-shadow(offsetX offsetY blur colour). Unlike box-shadow, there is no spread value: the function accepts only three length values, namely horizontal offset, vertical offset, and blur radius, followed by a colour expression. Chaining multiple drop-shadows requires listing each as a separate drop-shadow() call within the same filter property, separated by spaces rather than commas, as in filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.1)). The syntax difference from box-shadow means that developers moving from box-shadow to drop-shadow occasionally include a fourth length value for spread and produce unexpected results, because the fourth value is interpreted as part of the colour rather than a spread radius and silently produces either no shadow at all or one in an unintended colour. Always reach for the FixTools generator output to confirm valid syntax before committing the rule.
Performance differences between drop-shadow() and box-shadow are worth understanding for animated use cases and large element treatments. box-shadow is composited at the element edge level and the browser handles it efficiently using rectangle blur primitives that are well optimised on every modern GPU. filter: drop-shadow() requires the browser to process the element full pixel output to trace alpha boundaries before rendering the shadow, which is a more expensive operation per frame. For small icons at typical sizes of 16px to 48px, this cost is negligible and you should not hesitate to use it freely. For large elements with complex transparency, particularly SVG illustrations with many paths and gradients, drop-shadow() processing cost increases proportionally to the rendered area. For large rectangular elements like cards where a box-shadow would be acceptable, prefer box-shadow. For icons, badges, logos, and small PNG images where shape accuracy matters, drop-shadow() is the right tool and the cost is invisible to users.
Colour and opacity choices in drop-shadow() materially affect how natural the shadow reads against the background it sits on. A solid black at rgba(0,0,0,1) produces a heavy theatrical shadow that rarely looks right outside of stylised illustration contexts. Most production shadow treatments use black at 0.15 to 0.35 alpha, which mimics the way real shadows from soft light sources appear in photographs. For shadows on coloured or warm backgrounds, consider using a tinted shadow colour that picks up the surface tone, for example rgba(40, 30, 20, 0.3) on a beige surface instead of pure black, which keeps the shadow from looking artificially cool and out of place. The FixTools colour picker accepts both hex and rgba inputs, so you can sample directly from your design system palette and confirm the rendered result against representative content in the live preview before locking in the value.
Set horizontal and vertical offset values, adjust blur, and choose a shadow colour with the colour picker. The preview shows the shadow following the element shape outline rather than its bounding box. Copy the filter: drop-shadow() declaration when the shadow position and softness match your design.
Step-by-step guide to css filter: drop-shadow() generator:
Confirm the element needs a shape-following shadow
Check whether the target element is a PNG with transparency, an inline or img referenced SVG, a die cut product photograph, or an irregularly shaped illustration where a rectangular box-shadow would produce an unwanted rectangular halo artefact. For purely rectangular cards, buttons, and panels, box-shadow remains the simpler and more performant tool and supports a spread radius that drop-shadow does not.
Set offset and blur in the builder
Adjust the horizontal and vertical offset sliders inside the FixTools filter effects builder to set the apparent direction of the light source casting the shadow. Increase the blur radius slider to soften the shadow edge into a gentle ambient feel, or keep it small for a sharper definitional shadow. Use 0,0 offset combined with a moderate blur to produce a symmetric glow effect that surrounds the entire shape uniformly without implying any directional light.
Choose shadow colour
Select a colour with appropriate opacity for the background surface the element sits on. Use rgba(0,0,0,0.2) to rgba(0,0,0,0.4) for natural looking dark shadows on neutral backgrounds. For warm or coloured surfaces, sample a slightly tinted shadow colour that matches the surface family to avoid a visually cold floating effect. For glow style shadows on dark UI, choose a high alpha colour that matches the element accent rather than black.
Copy the filter: drop-shadow() declaration
Copy the generated CSS with the dedicated copy button and apply it to the element or icon class in your stylesheet next to any related typography and layout rules. Remove any existing box-shadow declaration from the same element to avoid both shadow types appearing simultaneously, which produces a doubled and unfocused result. Document the chosen shadow values in your design tokens file so the same treatment can be applied consistently across icons, badges, and illustrations elsewhere in the product.
Common situations where this approach makes a real difference:
Navigation logo shadow on variable background
A site has a sticky navigation bar that overlaps both a white hero section and a dark navy features section as users scroll. The PNG logo needs a shadow that looks correct against both backgrounds. The developer applies filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)) to the logo element. The shape-following shadow renders correctly on both light and dark backgrounds, where a box-shadow would have shown a rectangular artifact on the dark section.
SVG icon hover lift effect
A tool palette in a web app has SVG icon buttons that need a hover state communicating interactivity. The developer applies filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)) on :hover with transform: translateY(-1px) and transition: filter 0.15s ease, transform 0.15s ease. The shadow follows each icon path exactly, producing polished lift feedback across all icon shapes in the palette without any per-icon adjustments.
Product cutout photography shadow
An online store uses product photographs shot on white backgrounds that are then converted to PNGs with transparent backgrounds for display on a grey product page. box-shadow on these images produces visible rectangular halos. Switching to filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.2)) makes the shadow follow each product outline accurately, producing a natural-looking photograph-on-surface effect that would otherwise require retouching each image individually.
Multi-layer drop-shadow for premium icon appearance
A design system team wants the primary action icons to appear more physically present than secondary icons. They apply filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)) drop-shadow(0 4px 10px rgba(0,0,0,0.12)) to the primary icon class, combining a tight definition shadow with a broader ambient shadow. The chained two-layer drop-shadow is applied once in a single CSS class and works correctly across all icon shapes in the system.
Get better results with these expert suggestions:
Use drop-shadow on SVG icon buttons for clear hover feedback
Adding transition: filter 0.15s ease to an SVG icon button and applying filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) on :hover creates a shape-accurate shadow lift that reads as a physical press response. Because the shadow follows the icon path, it works correctly on any icon shape without needing to know the icon's bounding box dimensions.
Combine drop-shadow with a slight translate on hover for a lift effect
Pairing filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25)) with transform: translateY(-2px) on :hover creates the impression of an icon physically lifting off the surface. The shadow deepens and the icon moves upward simultaneously, both applied via CSS transitions on the same element. This combination works naturally on any icon shape.
Chain two drop-shadows for ambient and direct shadow layers
A single drop-shadow produces a directional shadow. Chaining two: filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2)) drop-shadow(0 6px 12px rgba(0,0,0,0.1)) adds a close, sharp shadow for definition and a distant, diffuse shadow for ambient depth. The combination reads as physically realistic and is used in design systems for premium icon treatments.
Apply drop-shadow to an SVG sprite sheet container cautiously
If multiple SVG icons are grouped inside a single container element and filter: drop-shadow() is applied to the container, the shadow is generated from all icons combined as a flat bitmap, not individually per icon. This produces a correct result if icons do not overlap, but causes blended shadows if icons are adjacent. Apply drop-shadow directly to individual icon elements for per-icon shadow control.
Use drop-shadow for PNG logos on variable backgrounds
A PNG logo on a navigation bar that appears over both light and dark sections of a page needs a shape-following shadow to look correct. box-shadow would show a rectangular halo on the dark sections. filter: drop-shadow() with a subtle shadow follows the logo outline correctly regardless of the background.
Keep blur low for small icon drop-shadows
At 16px to 24px icon sizes, a blur radius of 1px to 3px is sufficient for a visible shadow. Larger blur values at small sizes produce muddy halos that obscure icon detail and can make icons harder to read against complex backgrounds.
drop-shadow() does not accept a spread value
Unlike box-shadow, the filter: drop-shadow() syntax does not include a spread radius parameter. If you need a wider shadow, increase blur radius and decrease opacity slightly. Attempting to add a fourth length value as a spread will cause the value to be interpreted as part of the colour, producing unexpected output or no shadow.
More use-case guides for the same tool:
Other tools you might find useful:
Open the full Filter Effects Builder — free, no account needed, works on any device.
Open Filter Effects Builder →Free · No account needed · Works on any device