Free · Fast · Privacy-first

CSS Drop Shadow Generator

When you apply box-shadow to a PNG icon, an SVG illustration, or any image with transparency, the shadow renders around the rectangular bounding box of the element rather than around the actual visible shape.

⚡

Generates filter: drop-shadow() CSS for irregular shapes

🔒

Live preview showing shadow following actual element outline

✨

Controls for offset, blur, and colour

⚡

Free and browser-based with no sign-up

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Shadow Effect Builder to your website

Drop the Shadow Effect 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.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Shadow Effect Builder by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Why drop-shadow Follows Shape Outlines Where box-shadow Cannot

Box-shadow is applied to an element's CSS box model, which is always strictly rectangular regardless of the visual content inside it. This means that for a PNG file containing a star icon rendered against a transparent background, a box-shadow produces a rectangular shadow around the image file dimensions, not around the star shape itself. The transparent areas of the PNG are still considered inside the box from the CSS engine's perspective, so the shadow wraps the box and not the visible star. For icon-heavy interfaces, product photography with cutout backgrounds, organic illustrated characters, and SVG iconography, this rectangular shadow looks immediately wrong to any viewer, even one who could not articulate why. The mismatch between the visible content shape and the shadow shape breaks the basic visual contract that a shadow should belong to the object casting it.

The filter: drop-shadow() function works fundamentally differently. It processes the element after the browser has composited it, operating on the actual rendered pixel output rather than the CSS box. For a PNG with transparency, the browser first resolves the alpha channel, producing an internal pixel map where transparent areas have zero opacity and non-transparent areas have their full pixel values. The drop-shadow filter then creates a shadow derived from the non-transparent pixels, following their exact outline including curves, cutouts, and irregular boundaries. This means an irregular shape, whether a complex SVG path, a cutout PNG, or even a text element with custom glyph outlines, receives a shadow that wraps its visible content rather than its bounding box. The syntax is filter: drop-shadow(offsetX offsetY blur colour), mirroring the box-shadow value order but without spread or inset support.

One practical limitation worth understanding before deploying drop-shadow at scale: multiple drop-shadows require multiple filter() calls chained in the filter property, rather than the comma-separated list pattern used by box-shadow. Where box-shadow accepts box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1), filter requires filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) drop-shadow(0 8px 16px rgba(0,0,0,0.1)). Chaining too many filter functions on the same element adds GPU compositing cost, because each filter creates a new GPU layer and the browser composites them in sequence. Keep drop-shadow use to one or at most two layers on any element that animates or appears in long scrollable lists, and reserve more complex multi-layer compositions for static decorative content.

Drop-shadow integrates cleanly with the rest of the CSS filter property, which is a powerful but underused part of the platform. You can chain drop-shadow with grayscale, brightness, contrast, blur, hue-rotate, and saturate filters in a single declaration to create compound visual effects. The order of filters matters because each filter operates on the output of the previous one in the chain. Putting drop-shadow last means the shadow is calculated from the already-filtered pixel output, which is usually what you want. Putting drop-shadow first means subsequent filters apply to the shadow as well as the element, which can produce interesting effects like a tinted shadow but is rarely the right default.

MDN: filter: drop-shadow()W3C CSS Backgrounds Specification

How to use this tool

💡

Upload or select a PNG or SVG element in the preview, then adjust offset and blur sliders to position the shadow around the actual shape. Copy the filter CSS when the shadow follows your element's outline correctly.

How It Works

Step-by-step guide to css drop shadow generator:

1
Identify the element needing a shape-following shadow
Confirm the element you are styling is a PNG with transparency, an inline SVG, an SVG used as an img source, or another irregularly shaped element where applying box-shadow would visibly produce a rectangular halo artifact around the element. If the element is a solid rectangular block with no transparency, box-shadow is the simpler and more efficient choice. Drop-shadow shines specifically when there is alpha transparency to follow.
2
Set offset values
Drag the X and Y offset sliders to position the shadow directionally relative to the element. Positive Y pushes the shadow downward and positive X pushes it rightward, implying a light source from the upper left. For a symmetric ambient glow with no directional offset, set both values to zero and rely on blur to create the halo. Establish offset direction before adjusting blur for the cleanest iteration loop.
3
Adjust blur and colour
Set the blur radius to match the desired edge softness for the shadow. Small icons at 16 to 24 pixels need only 2 to 4 pixels of blur, while large illustrations can absorb 12 pixels or more without losing detail. Choose a shadow colour with opacity appropriate for the background the element will sit on, favouring lower opacity on light backgrounds and higher opacity on coloured or photographic backgrounds.
4
Copy the filter CSS
Copy the generated filter: drop-shadow() declaration to your clipboard and paste it into the element's CSS rule. If the element previously had a box-shadow declaration, remove that property entirely to avoid rendering two shadows simultaneously, which produces a visibly doubled effect with the box-shadow rectangle showing alongside the drop-shadow contour. The filter CSS works in every modern browser without prefixes.

Real-world examples

Common situations where this approach makes a real difference:

Navigation icon bar with SVG icons

A developer is building a bottom navigation bar with five SVG icons that need subtle shadows to lift them off the bar background and signal interactivity. Applying box-shadow to each icon produces an awkward rectangular shadow around the SVG element's bounding box, which immediately reads as wrong against the curved icon shapes. Switching to filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) makes the shadow follow each icon's actual path outlines precisely, producing clean shadows that read correctly on both light and dark tab bar background variants. The same drop-shadow values work uniformly across the entire icon set.

Product image with cutout background

An e-commerce developer is displaying product photos with transparent backgrounds on a clean white product detail page. Applying box-shadow adds a rectangular frame effect that immediately reveals the file boundary and makes the products look like they have been pasted onto the page rather than placed in a scene. Using filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.15)) wraps the shadow around the actual product silhouette, making the product appear to lift naturally off the page without any visible bounding box artifact. The effect mimics studio product photography lighting and improves the perceived quality of the catalogue.

Logo on a hero section

A brand site places a PNG logo with transparent areas over a full-width photo background that varies in brightness across its width. The designer wants a subtle shadow to separate the logo from busy photo backgrounds and ensure brand legibility regardless of which part of the photo the logo overlaps. Drop-shadow at 0 offset and 8 pixel blur with rgba(0,0,0,0.4) creates a soft halo that follows the logo shape exactly, improving legibility without adding a solid background fill behind the logo. The result feels integrated with the photo rather than slapped on top of it.

Illustrated character in a game UI

A game developer is adding character sprites as PNG images with irregular transparent outlines to a browser-based game scene. Box-shadow produces ugly rectangular halos around each character that immediately break the illusion of the game world. Filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4)) follows each character's irregular silhouette exactly, giving the sprites a grounded contact shadow that makes them feel placed in the scene rather than floating awkwardly above it. The same drop-shadow declaration applies uniformly to dozens of different character sprites without per-character tuning.

When to use this guide

Use this when you need to add a shadow to a PNG with transparency, an SVG icon, or any irregularly shaped element where a box-shadow would produce an unwanted rectangular halo.

Pro tips

Get better results with these expert suggestions:

Spread is not available in drop-shadow

Unlike box-shadow, the filter: drop-shadow() function does not accept a spread value, which surprises developers migrating from box-shadow expecting feature parity. If you need a wider shadow, the workaround is to increase the blur radius significantly and reduce the colour opacity slightly to keep the overall intensity comparable. For a glow effect with no directional offset, push blur to 12 pixels or more with a saturated colour, for example drop-shadow(0 0 12px rgba(255,100,0,0.6)). The lack of spread makes drop-shadow less flexible than box-shadow for precision border-style effects but does not limit its usefulness for organic shape shadows.

Animate filter on :hover for icon interaction feedback

Adding transition: filter 0.15s ease to an SVG icon button and changing the drop-shadow values on :hover creates an immediate, clear interaction signal that confirms clickability. The shadow can deepen, shift colour, or grow into a brand-coloured glow as the user hovers, providing tactile feedback without needing a border change or background colour swap. Because drop-shadow follows the icon outline rather than a rectangular box, this animated interaction feels integrated with the icon itself rather than as a separate hover ring around the bounding box. Test on mid-range mobile to confirm smooth frame rate.

Chain drop-shadow with other filters for compound effects

The filter property can chain multiple functions in sequence: filter: grayscale(0.3) drop-shadow(0 4px 8px rgba(0,0,0,0.25)). The order in which functions appear matters because each function operates on the output of the previous one. Filters applied earlier in the chain affect the element pixels that later filters then process, so putting drop-shadow last in the chain processes the already-filtered pixel output and produces a shadow that respects the prior visual treatment. This composition pattern is how you achieve photo-treated looks like a desaturated product image with a soft cast shadow.

Use currentColor in drop-shadow for themed icons

Setting the drop-shadow colour to the currentColor keyword, as in filter: drop-shadow(0 2px 4px currentColor), makes the shadow automatically inherit the element's text colour. Combined with CSS custom properties for theme management, this lets a single icon component respond to light mode and dark mode theme changes without any per-theme shadow colour override. Drop the icon into a dark sidebar and the shadow darkens. Move it to a coloured callout and the shadow shifts to match. The technique reduces stylesheet duplication and is essential for systems that support many themes.

Use drop-shadow for SVG icons in navigation

SVG icons in navigation bars often sit against varied background colours. A drop-shadow that follows the SVG path remains correct whether the background is white, dark, or a photo, while a box-shadow would show a rectangular artifact on darker backgrounds.

Keep blur low for icons at small sizes

At 16px to 24px icon sizes, a blur radius of 2px to 4px is sufficient. Larger blur values at small icon sizes produce muddy shadows that obscure detail and can make the icon harder to read.

Test on multiple background colours

Drop-shadows on icons often look fine on white but disappear or look harsh on dark or coloured backgrounds. Test your drop-shadow values against the actual background colours used in your UI before finalising.

FAQ

Frequently asked questions

Box-shadow applies to the CSS box model rectangle and always produces a rectangular shadow regardless of the visual content drawn inside the element. Filter: drop-shadow() processes the composited pixel output of the element and follows the actual visible shape including any alpha-transparent areas, curves, and cutouts. As a general rule, use box-shadow for rectangular elements like cards, buttons, modals, and panels where the box model boundary matches the visible content boundary. Use drop-shadow for PNGs with transparency, SVG icons, irregular illustrations, text glyphs, and any element where the visible shape differs from the bounding box. Box-shadow also offers spread and inset options that drop-shadow does not support, making box-shadow more flexible for standard rectangular UI work.

Yes, and SVG is one of the strongest use cases for drop-shadow. Applied to an SVG element, whether referenced via an img tag or inlined directly in HTML, drop-shadow follows the paths and shapes defined in the SVG markup precisely. This makes it ideal for icon libraries where each icon is an SVG with complex outlines, decorative illustrations with intricate detail, and inline UI graphics like progress rings and chart markers. The shadow wraps the exact visual boundary of each path, producing a clean result even for intricate shapes with thin strokes and small details. For SVG icons sitting on varied background colours, drop-shadow is the only correct choice because the shape-following behaviour ensures the shadow always belongs to the icon visually.

No, the drop-shadow() filter function accepts only four arguments: offset-x, offset-y, blur-radius, and colour. There is no spread parameter, which is a real limitation compared to box-shadow. To create a wider shadow effect with drop-shadow you must increase the blur radius. For a glow effect with no directional offset, use 0 for both offset values combined with a larger blur radius and a saturated colour, for example drop-shadow(0 0 12px rgba(0,220,255,0.7)). If you need a precise spread-like ring effect, an SVG filter primitive using feMorphology can achieve it, but that requires inline SVG filter definitions rather than CSS and is significantly more complex to maintain in a typical web project.

Yes, by chaining multiple drop-shadow() calls in sequence within the filter property. For example: filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) drop-shadow(0 1px 2px rgba(0,0,0,0.2)) applies two separate drop-shadows in sequence. Each function in the filter chain is applied in order, with each subsequent filter operating on the output of the previous one. Note that this differs from box-shadow, which uses a single comma-separated list within one property value. Stacking too many drop-shadow calls on the same element compounds GPU work, so keep the chain to two or three drop-shadows maximum for any animated or scrolled element to maintain smooth frame rates on lower-end mobile devices.

No, like box-shadow, filter: drop-shadow() is a visual effect only and does not change the element's computed dimensions, its position in the document flow, or the space it occupies in the layout. The shadow is rendered entirely during the compositing phase after layout has already been calculated. Surrounding elements are not pushed aside by the presence of a drop-shadow, and the element itself does not grow to contain its shadow. However, if the shadow extends beyond a parent container that has overflow: hidden set, the drop-shadow will be visibly clipped at the parent boundary, the same as with box-shadow. Add padding to the parent or change its overflow setting if shadow clipping becomes an issue.

Yes, and when applied to a text element, drop-shadow follows the actual glyph outlines and creates a shadow that wraps the rendered letter shapes rather than a rectangular block around the text. This is functionally similar to the text-shadow property for simple cases, with the same per-glyph shadow rendering behaviour. The main advantage of drop-shadow over text-shadow for text is that drop-shadow can be combined with other filter functions like brightness or grayscale in the same declaration, enabling compound visual effects. The main advantage of text-shadow over drop-shadow for text is that text-shadow accepts a comma-separated list for multiple shadows on one property without needing to chain filter calls.

Both properties trigger GPU compositing in modern browsers and are generally efficient for static rendering. However, animating filter: drop-shadow() on many elements simultaneously can be more expensive than animating box-shadow, because each filter function creates a new GPU layer and the browser must composite them in sequence. For hover animations on individual elements, this performance overhead is imperceptible. For scroll-driven animations affecting many elements at once, or for long lists of drop-shadowed images that paint during scroll, you should test on a mid-range mobile device to confirm acceptable frame rate. Box-shadow tends to be marginally cheaper because the box model rectangle is simpler to composite than an arbitrary shape outline.

Yes, you can use CSS custom properties inside a drop-shadow function exactly as you would in any other CSS value. For example: filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-colour)). Changing the custom property values from JavaScript, in responsive media queries, or in theme switcher classes automatically updates the rendered shadow without rewriting the filter declaration. This is the recommended approach for any project that wants consistent drop-shadow values across many icons or images, because updating a single property definition at the root level cascades to every consumer of the variable simultaneously, supporting both maintainability and theme variation.

Pixelated or jagged drop-shadows usually result from a low-resolution source image or an unusually low blur radius applied to a small element. Drop-shadow operates on the composited pixel output, so if the source PNG has hard antialiased edges or scaled-down rendering artifacts, the shadow inherits those artifacts in its outline. Solutions include using higher-resolution source images, switching from PNG to SVG where possible to get vector-perfect outlines at any size, and increasing the blur radius slightly to smooth out edge irregularities. If the issue persists at small sizes, verify the image has not been scaled down dramatically from its native resolution, which often introduces aliasing visible in the shadow.