Free · Fast · Privacy-first

CSS Shadow on Image Generator

Applying box-shadow to an image with a transparent background produces a rectangular shadow that traces the image file dimensions rather than the actual visible subject, which immediately looks broken to any viewer who can see both the cutout shape and the box halo behind it.

⚡

Generates filter: drop-shadow() that follows PNG transparency

🔒

Live preview showing shadow wrapping the actual image outline

✨

Controls for offset, blur, and colour with alpha

⚡

Free browser-based with no upload required

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 box-shadow Fails on Transparent Images and How filter: drop-shadow() Solves It

The CSS box model treats every element as a rectangle regardless of the visual content it contains, which is the root cause of the problem. When you apply box-shadow to an img element containing a transparent PNG, the shadow renders around the img element's full dimensions, meaning the full declared width and height of the image file including every transparent pixel along the edges. A star-shaped PNG icon against a transparent background receives a rectangular shadow with sharp corners that clearly show the file boundary instead of the star silhouette. For product photography, icon libraries, illustrated characters with organic outlines, and any cutout artwork, this rectangular shadow immediately looks wrong because the viewer can plainly see that the shadow does not match the subject they are looking at.

The filter: drop-shadow() function solves this problem by operating at the composited pixel level rather than at the box model level. After the browser has rendered the image including its alpha channel transparency, the drop-shadow filter calculates which pixels are non-transparent based on the alpha values, and creates a shadow based on those pixels' actual outlines. The result is a shadow that follows the exact visible boundary of the image content, wrapping around cutout edges, following curved outlines, correctly ignoring transparent corners, and respecting interior holes such as letterforms in logo PNGs. The syntax is filter: drop-shadow(offsetX offsetY blur colour), which is intentionally similar to box-shadow but without support for spread or inset values.

Combining drop-shadow with hover effects creates powerful image interaction states for product galleries, portfolio grids, and editorial features. Animating filter: drop-shadow() from a neutral grey shadow at rest to a coloured glow on hover changes both the shadow character and the implied atmosphere around the image at the same time. A product photo that shifts from a soft dark directional shadow to a warm orange glow on hover feels deliberately crafted rather than mechanically interactive. The drop-shadow continues to follow the image outline accurately in both states, so the animated transition looks natural and shape-aware rather than rectangular. Add transition: filter 0.2s ease to the img element to interpolate smoothly between shadow states without any jank.

Browser support and performance for filter: drop-shadow are mature and reliable across modern engines, but there are still practical limits worth knowing. The filter runs on the GPU during compositing and is generally cheap, but very large images, heavy blur radius values, and many simultaneous drop-shadow elements scrolling at once can combine to produce visible jank on lower-end mobile devices. Keep blur radius modest, typically under 16 pixels for product photography, and avoid applying drop-shadow to every image on a long-scrolling page. Reserve the effect for hero images, primary product photos, and critical visual elements where the shape-following shadow genuinely improves the design rather than treating it as a global default for every img on the site.

MDN: filter: drop-shadow()MDN: box-shadow

How to use this tool

💡

Adjust offset, blur, and colour in the builder and confirm the preview shows the shadow following the image content rather than the bounding box. Copy the filter CSS when the shadow wraps the image correctly.

How It Works

Step-by-step guide to css shadow on image generator:

1
Confirm the image has a transparent background
Check that your PNG, WebP, or SVG file actually has a transparent alpha background in an image editor before applying drop-shadow. The filter only follows non-transparent pixels, so applying it to a JPEG or any image with a solid coloured background simply produces a rectangular shadow identical to box-shadow with no visual benefit. If the background is not transparent, return to the image source file and remove the background, or pick a different image, before continuing.
2
Set offset and blur for the shadow direction
Set horizontal and vertical offset values to position the shadow directionally beneath and to one side of the visible subject. Adjust blur radius to control the softness of the shadow edge. For product photography a low blur value in the 4 to 8 pixel range produces a crisp studio-style shadow, while higher blur values up to 20 pixels produce a softer ambient glow that suits illustration and editorial contexts. Verify the result in the live preview before committing to specific values.
3
Choose shadow colour and opacity
Select a shadow colour appropriate to the background colour the image will ultimately sit on in production. Use lower opacity values around rgba(0,0,0,0.18) for subtle natural-looking product shadows on white or light backgrounds. Use higher opacity or saturated coloured shadows for more dramatic editorial effects on darker or coloured page sections. Test against the actual page background colour rather than the tool default preview to avoid surprises after deployment when the shadow turns out too faint or too heavy.
4
Copy the filter CSS and remove any box-shadow
Copy the generated filter: drop-shadow() declaration. Apply it to the img element in your stylesheet and crucially audit the surrounding CSS to remove any existing box-shadow rule on the same element, on parent components that might cascade, or on any global img selector. Leaving a stray box-shadow in place will produce the double-shadow artifact described in the pro tips section. Test the final result in the browser on the actual page where the image will be displayed to confirm the shadow renders cleanly.

Real-world examples

Common situations where this approach makes a real difference:

Product photography on an e-commerce product page

An e-commerce developer displays product photos with white or transparent backgrounds across category pages and product detail views. Box-shadow on these images produces an obvious rectangular outline around each photo that breaks the otherwise carefully styled product presentation. Switching to filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.18)) makes the shadow wrap each product silhouette accurately, giving every product a natural studio-shadow appearance that feels physically placed on the page surface and substantially improves perceived product quality across the storefront without any image retouching work.

PNG character sprite in a browser game

A browser game developer adds animated character sprites to the game canvas as PNG cutouts with transparent backgrounds. Each character needs a ground shadow beneath it to feel grounded in the scene rather than floating in a void. Using filter: drop-shadow(0 8px 6px rgba(0,0,0,0.35)) adds a directional shadow below each character that follows the exact irregular pixel outline of the sprite. This grounds the character on the floor convincingly without any visible rectangular halo around the sprite's bounding box, even as the character animates through multiple frames during play.

Brand logo on a hero section with varied background

A brand site places a transparent-background PNG logo over a full-width looping video background in the hero section of the home page. A drop-shadow with zero offset and 8 pixel blur creates a soft halo around the logo that separates it from the video content regardless of the current video frame, ensuring legibility against everything from bright sky shots to dark interior scenes. Box-shadow in the same place would show the rectangular file boundary outline, which would be visually distracting against the moving video and undermine the otherwise polished hero presentation immediately.

Illustrated character in a marketing email

A marketing team adds an illustrated character mascot PNG to an email template promoting a seasonal campaign. Filter: drop-shadow() is now widely supported in modern email clients including the major webmail providers and current desktop clients. The drop-shadow follows the character's hand-drawn organic outline, adding subtle depth to the illustration that makes it pop against the email background. The box-shadow alternative would look obviously awkward with the organic character shape against the surrounding template background, undermining the warm hand-illustrated feel the design team is trying to communicate.

When to use this guide

Use this when you need to add a shadow to a PNG with a transparent background, a product photo cutout, or an SVG illustration where box-shadow would produce an incorrect rectangular halo.

Pro tips

Get better results with these expert suggestions:

Combine drop-shadow with object-fit for responsive images

When using responsive images with object-fit: cover or object-fit: contain, the drop-shadow filter applies to the rendered pixel output after object-fit cropping has already taken place. This means the shadow always wraps the visible image content as it appears in the layout, even as the image dimensions and crop change at different viewport sizes. The behaviour is exactly what you want for art-directed responsive imagery and is one of the strongest practical reasons to standardise on drop-shadow over box-shadow for any image that uses object-fit anywhere in the responsive image system.

Use drop-shadow on :hover for coloured lighting effects

Applying different drop-shadow colours and blur values in resting and hover states simulates physically changing the lighting on an image as the cursor approaches it. A product photo that shifts from filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) at rest to filter: drop-shadow(0 4px 16px rgba(255,100,0,0.5)) on hover creates a warm coloured glow effect that follows the product silhouette and feels deliberately atmospheric. Pair the colour shift with a small transform: translateY(-2px) to add a subtle lift, and the combined treatment becomes one of the most satisfying product card hover patterns available in pure CSS.

Chain with brightness filter for an integrated polished look

Chaining drop-shadow with brightness in a single filter declaration, for example filter: brightness(1.05) drop-shadow(0 4px 8px rgba(0,0,0,0.2)), subtly brightens the rendered image pixels and then adds a shadow based on the brightened output, all in one property. The brightness filter is applied first in the chain, then drop-shadow processes the brightened result. This combination gives images a subtly studio-treated polished appearance that elevates ordinary product photography without requiring any retouching work in an image editor before upload to the site.

Remove box-shadow entirely when switching to drop-shadow

Combining box-shadow and filter: drop-shadow() on the same img element produces two visible shadows simultaneously: a rectangular halo from box-shadow tracing the element box, and a shape-following shadow from the filter tracing the alpha channel. The result is a double-shadow artifact that looks broken and tells the viewer the page was authored carelessly. Always remove box-shadow completely when adding drop-shadow on images with transparent backgrounds, and audit your component CSS to catch any inherited or cascaded box-shadow rules that might be applied from parent selectors and creating the conflict.

Always use filter: drop-shadow() on transparent PNGs

If your image has a transparent background, drop-shadow is mandatory. Box-shadow will visibly show the rectangular file boundary. Drop-shadow follows the actual pixel outline. This difference is immediately obvious to any visitor.

Keep blur low for sharp product photo shadows

Product photos often look best with 4-8px blur to suggest a real studio shadow. Very high blur values (20px+) look like a glow rather than a shadow on detailed photo content.

Test the image on both light and dark backgrounds

Drop-shadows on transparent images look very different on different background colours. A dark shadow barely visible on a white background may be too heavy on a light grey background. Always preview on your actual page background.

FAQ

Frequently asked questions

Box-shadow applies to the element's CSS box model rectangle, which is always the full declared width and height of the img element regardless of the visual image content inside that box. On a PNG with transparent areas around an irregular subject, this produces a rectangular shadow that includes the transparent regions, visibly showing the file boundary and the empty transparent corners. The result reads as broken because the shadow does not match the subject the viewer sees. Filter: drop-shadow() processes the rendered pixels including their alpha transparency, following the actual visible content outline pixel by pixel.

Yes. Drop-shadow is applied on a per-frame basis on animated images, so the shadow continuously updates as the animation progresses. On animated GIFs and animated WebP, the shadow follows the visible content in each individual animation frame, which means a character sprite waving an arm will have a shadow that updates to match each frame of the wave. WebP images with static transparency are handled identically to PNG. For SVG files with complex animated paths or SMIL animation, drop-shadow follows the composited frame output at each animation tick.

No. The drop-shadow() filter function does not support a spread parameter, unlike box-shadow which accepts a spread radius value. The drop-shadow function accepts only offset-x, offset-y, blur-radius, and colour, in that order. To achieve a visually wider shadow halo, simply increase the blur-radius value. If you specifically need a border-like solid spread effect that hugs the alpha outline of an image, SVG filter primitives such as feMorphology can produce a spread-equivalent result, but this requires inline SVG filter definitions rather than the simpler CSS filter function.

Yes, with one important caveat: ancestor containers with overflow: hidden will clip the shadow if it extends beyond the container boundary. Apply drop-shadow directly to the img element where possible, and audit any ancestor wrapper, card, or grid container in the cascade to confirm that none of them have overflow: hidden applied where the shadow needs to extend beyond the image footprint. If clipping does occur, either add padding to the container equal to the maximum shadow extent or remove the overflow constraint on that wrapper. Both approaches restore the full shadow visibility.

Yes. Adding transition: filter 0.2s ease to the img element and changing the drop-shadow values inside a :hover, :focus, or :focus-visible rule animates the shadow smoothly between states. The browser interpolates offset, blur, and colour values continuously across the transition duration. Because filter compositing runs on the GPU, this animation is generally smooth even on mid-range devices. Test on mobile if the animation is being applied to images that are large in pixel dimensions, displayed at large CSS sizes, or numerous enough to be visible simultaneously in the same viewport during scroll.

Drop-shadow is applied entirely during the GPU compositing phase, after the image has already been downloaded, decoded, and rasterised. It therefore has zero effect on initial download time, decode speed, or first paint. The GPU processes the filter on each paint operation thereafter. For very large images, very heavy blur radius values, or many images with drop-shadow visible simultaneously during scroll, the cumulative compositing cost can affect scroll performance on low-end mobile devices. Limit drop-shadow to images where it genuinely improves the design rather than applying it as a global default on every img.

No, not directly in the way you might expect. Filter: drop-shadow() applies to the element as a whole including all visible content, but it does not introspect or selectively process the alpha channel of a CSS background-image. To add a shape-following shadow to an image with transparency you need to render that image through an img element rather than as a CSS background, or build the effect using inline SVG filter techniques. For rectangular background images without transparency, ordinary box-shadow on the element containing the background is simpler and produces the same visual result.

Use strongly directional offset values. A positive vertical offset combined with a zero horizontal offset concentrates the shadow visually below the image subject with minimal lateral spread. With drop-shadow, keeping blur radius low and offset high creates a tight bottom-positioned shadow with very little bleeding around the sides. For example, drop-shadow(0 12px 4px rgba(0,0,0,0.4)) produces a shadow concentrated at the bottom edge of the subject. Higher blur values would spread the shadow outward symmetrically, which is the opposite of the directional effect you are aiming for.

SVG has its own filter element with feDropShadow and feGaussianBlur primitives that operate inside the SVG document. CSS filter: drop-shadow() applied externally to an SVG element produces a similar visual result with much simpler syntax and the benefit of CSS transitions and hover state changes. For most use cases, the CSS approach is preferable. Use inline SVG filter primitives only when you need effects beyond drop-shadow, such as spread, multiple chained filter operations, or complex compositing that the CSS filter functions do not support. The performance characteristics of the two approaches are similar in modern browsers.

Yes. The filter property accepts multiple chained filter functions in a single declaration, including multiple drop-shadow calls. Each drop-shadow processes the output of the previous filter in the chain, so stacking two drop-shadow values produces a shadow on the shadow as well as on the original image, which can create unexpected results. Used carefully, this can produce layered glow plus shadow combinations on a single image. For most cases a single drop-shadow with carefully chosen blur and colour values produces a better result than stacking multiple filters and is easier to reason about.