How to Add Shadow to Image: Types, Tools, and Code

A shadow turns a flat image into something that looks like it exists in physical space. Product photos pop off the page. UI elements feel clickable. Logos gain depth. The effect is subtle, but the difference between a floating cutout and a grounded object is enormous.

This article covers every practical way to add shadow to image files — from Photoshop layer styles to pure CSS for web developers. You will learn which shadow type fits which use case, the exact settings that produce professional results, and how to avoid the "2005 PowerPoint" look that gives shadows a bad name.

Shadow Types: Pick the Right One

Not all shadows serve the same purpose. Choosing the wrong type makes an image look worse, not better. Here is what each type does and when to use it.

Rule of thumb: If the image will sit on a web page among other elements, drop shadow. If it is a product photo that needs to look like a real object on a surface, natural or contact shadow. If you want a premium, glossy feel, reflection shadow.

Method 1: Photoshop (v26.3)

Adobe Photoshop v26.3 (proprietary, requires Creative Cloud subscription starting at $22.99/month) is the industry standard for shadow work. Layer Styles make simple shadows trivial, and manual techniques handle complex lighting.

Drop Shadow via Layer Styles

1. Open your image and ensure the subject is on its own layer. If you are working with a photo cutout, the background should already be transparent.
2. Select the subject layer. Go to Layer > Layer Style > Drop Shadow (or double-click the layer).
3. Start with these settings:
   • Blend Mode: Multiply
   • Color: #000000 (pure black)
   • Opacity: 35%
   • Angle: 135° (light from upper-left — the convention for web and print)
   • Distance: 8 px
   • Spread: 0%
   • Size: 16 px
4. Check Use Global Light if you want all shadows in the document to share the same angle.
5. Click OK. Adjust opacity and size until the shadow feels present but not heavy.

Pro tip: Reduce opacity to 20-25% for light backgrounds. Increase to 40-50% for dark backgrounds where you need more contrast to make the shadow visible.

Natural Shadow for Product Photography

Layer Styles produce uniform shadows. Real light does not work that way — shadows are sharper near the contact point and softer as they stretch away. For product photography, build the shadow manually:

1. Duplicate the subject layer and fill it with black (Edit > Fill > Black).
2. Edit > Transform > Distort. Pull the top corners to skew the shadow in the direction opposite your light source.
3. Apply Filter > Blur > Gaussian Blur at 12-20 px to soften the shadow.
4. Reduce the shadow layer opacity to 30-45%.
5. Add a layer mask. Use a gradient on the mask (black to white) so the shadow fades as it moves away from the base of the object.
6. Position the shadow layer below the subject layer.

This technique produces directional shadows that match a specific light angle — critical for e-commerce composites where multiple products need consistent lighting. For product shots on clean backgrounds, pair this with a white background setup for marketplace-ready results.

Reflection Shadow

1. Duplicate the subject layer.
2. Edit > Transform > Flip Vertical.
3. Position the flipped copy directly below the original, aligned at the base.
4. Reduce opacity to 25-35%.
5. Add a layer mask and apply a linear gradient (white at top, black at bottom) so the reflection fades out within 30-50% of the object's height.
6. Optionally apply a 2-4 px Gaussian Blur for a slightly diffused reflection.

Reflection shadows work best on solid, flat backgrounds — white or light gray. They imply a polished surface without needing to render the actual surface.

Method 2: GIMP (v2.10.38)

GIMP v2.10.38 (free, open-source, GPL v3, available at gimp.org) handles shadows competently. The interface differs from Photoshop, but the principles are identical.

Drop Shadow

1. Open your image. If the subject needs isolation, use Fuzzy Select or Paths tool to select and cut the subject to its own layer.
2. Ensure the subject layer has an alpha channel (Layer > Transparency > Add Alpha Channel).
3. Go to Filters > Light and Shadow > Drop Shadow.
4. Set these values:
   • X offset: 5 px
   • Y offset: 5 px
   • Blur radius: 15 px
   • Color: Black
   • Opacity: 60 (GIMP uses 0-100 scale, so 60 here is equivalent to ~35% visually when composited)
5. Click OK. GIMP creates the shadow on a new layer automatically, so you can adjust position and opacity independently.

Manual Natural Shadow

1. Duplicate the subject layer (Layer > Duplicate Layer).
2. Select the duplicate, then Colors > Curves — drag the curve to the bottom-left to turn the entire layer black.
3. Use the Perspective tool (Shift+P) to skew the black layer into a shadow shape.
4. Apply Filters > Blur > Gaussian Blur at 15-25 px.
5. Reduce layer opacity to 30-40%.
6. Add a layer mask (Layer > Mask > Add Layer Mask > White). Paint with a soft black brush on the mask to fade the shadow's far edge.
7. Move this layer below the subject in the layer stack.

GIMP lacks Photoshop's non-destructive layer styles, so keep your layer stack organized. Name your layers — "Subject," "Shadow," "Background" — because you will need to revisit them.

Method 3: CSS Shadows for Web Developers

If you are placing images on a web page, CSS shadows render in the browser and require zero image editing. This is the fastest, most maintainable approach for web content.

box-shadow

The box-shadow property applies to the element's bounding box — the rectangular frame around the image, not its visual contour.

.product-card img {
  box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

Syntax: box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

Common recipes:

/* Subtle card shadow */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

/* Elevated card (Material Design style) */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
            0 1px 3px rgba(0, 0, 0, 0.08);

/* Strong e-commerce product shadow */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

/* Inner shadow (inset) */
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);

Limitation: box-shadow follows the element's box, not the image content. A PNG with a transparent background gets a shadow around the entire rectangle, not the visible shape. For content-aware shadows, use drop-shadow().

drop-shadow() Filter

The CSS drop-shadow() filter traces the alpha channel of the image, producing a shadow that follows the actual shape of the content — exactly what you want for PNGs with transparency.

.product-image {
  filter: drop-shadow(4px 6px 10px rgba(0, 0, 0, 0.25));
}

Syntax: filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);

Note: drop-shadow() does not support spread-radius or inset. If you need those, use box-shadow.

/* Floating product on white background */
.hero-product {
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
}

/* Subtle icon shadow */
.icon {
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.15));
}

/* Colored shadow for branding */
.brand-element {
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

Performance note: drop-shadow() is GPU-composited in modern browsers and performs well, but avoid stacking multiple drop-shadow() filters on many elements simultaneously. For pages with dozens of shadowed images, consider applying the shadow during image editing and compressing the result instead of rendering shadows in CSS.

Which CSS Shadow Method to Use

/* Hover lift effect */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px);
}

Shadows for Product Photography (E-Commerce)

Product shadows are not decorative — they are a trust signal. Amazon, Shopify, and Etsy listings with consistent, professional shadows convert measurably better than floating cutouts on pure white.

The Three E-Commerce Shadow Styles

Contact shadow is the most common for marketplace listings. A tight, soft ellipse directly beneath the product suggests it is resting on a surface. Photoshop: create a black ellipse on a layer below the product, apply 8-12 px Gaussian Blur, set opacity to 25-35%.

Natural directional shadow works for lifestyle and editorial product shots. Follow the manual shadow technique in the Photoshop section above, matching the light direction from the product photography setup.

Reflection shadow signals premium pricing. Common for electronics, jewelry, and luxury goods. The glossy-surface implication elevates perceived value.

Consistency Across a Catalog

If you are shooting an entire product catalog, shadow consistency matters more than shadow quality. Mismatched shadows across listings look sloppy even if each individual shadow is technically excellent.

• Pick one shadow style for the entire catalog.
• Use the same light angle (135° upper-left is standard).
• Match opacity within a 5% range across all products.
• Save your shadow as a Photoshop Action or GIMP Script-Fu to automate application.

After adding shadows, compress your product images before uploading. Marketplace platforms re-compress uploaded images aggressively — starting with an optimized file means less quality loss. For format flexibility, you can also convert between formats to match each platform's preferred image type.

Platform Shadow Requirements

Amazon requires a pure white (#FFFFFF) background for main product images. Shadows are allowed but must not extend beyond the image boundary. Keep shadow opacity under 30% and blur tight.

Shopify themes vary, but most display product images on white or light gray cards. A subtle contact shadow (5-8 px blur, 20-30% opacity) works universally.

Etsy is more permissive — lifestyle backgrounds with natural shadows perform well because the platform's audience values authenticity and craft.

Free Online Tools

If you need a quick shadow without installing software, several browser-based tools handle it.

Canva (freemium, canva.com) — includes a drop shadow effect in the image editor. Limited control over shadow parameters on the free tier. Pro tier ($12.99/month) unlocks more options.

Photopea (free for basic use, photopea.com, ad-supported) — a full Photoshop-compatible editor in the browser. Supports Layer Styles including Drop Shadow with the same controls as Photoshop. Excellent for one-off shadow work without installing anything.

remove.bg + manual shadow — use remove.bg (freemium, remove.bg) to isolate the subject with background removal (similar to a photo cutout), then apply a shadow in any editor. This two-step approach is popular for product photography workflows.

For any of these tools, once you have your final shadowed image, run it through Pixotter's compressor to optimize file size before publishing. Shadows add subtle gradient data that inflates file size — compression recovers that overhead without visible quality loss.

Common Mistakes (and How to Fix Them)

Shadow too dark. The most frequent error. Shadows in nature are rarely pure black — they pick up ambient color. Reduce opacity to 20-35% for most use cases. If the shadow is the first thing your eye notices, it is too strong.

Wrong direction. Every shadow in a composition must come from the same light source. Mixed shadow directions break the illusion instantly. Pick an angle (135° is the safe default) and apply it everywhere.

Blur too tight or too wide. A hard-edged shadow (0-2 px blur) looks like a cutout sticker. An extremely soft shadow (50+ px blur) looks like a vignette, not a shadow. Match blur to the apparent distance between the object and its surface: close = sharp, far = soft.

Shadow on the wrong layer. The shadow layer must sit below the subject layer. This sounds obvious, but in complex composites with multiple objects, layer ordering mistakes create shadows that appear to float on top of objects.

Ignoring the alpha channel in CSS. Using box-shadow on a transparent PNG produces a rectangular shadow. Switch to filter: drop-shadow() for images with transparency.

Optimizing Shadowed Images for the Web

Shadows add gradient data to images, which can increase file size by 10-30% depending on shadow size and blur. For web delivery, this overhead matters.

1. Compress after adding shadows. Run your final image through Pixotter's compressor — the client-side processing preserves shadow quality while stripping unnecessary data.
2. Choose the right format. JPEG handles photographic shadows well. PNG preserves transparency if the shadow extends beyond the image bounds. WebP delivers both at smaller file sizes. Pixotter can convert between any of these formats in one step.
3. Consider CSS shadows instead. For UI elements and rectangular images, rendering the shadow in CSS avoids baking it into the image file entirely — zero additional bytes.
4. Match shadow to background. A shadow designed for a white page looks wrong on a dark page. If your site supports dark mode, consider using CSS shadows that adapt via media queries rather than shadows baked into the image.

For images that have had extensive editing — shadow work combined with background changes or blur effects — compression becomes especially important. Each editing step can introduce artifacts that compound. A single compression pass at the end of your workflow cleans up the entire pipeline.

FAQ

How do I add a shadow to a PNG with a transparent background?

Use the CSS filter: drop-shadow() property for web images — it follows the alpha channel and produces a shadow that matches the visible content shape. In Photoshop v26.3 or GIMP v2.10.38, place the transparent PNG on its own layer and apply a drop shadow via Layer Styles (Photoshop) or Filters > Light and Shadow > Drop Shadow (GIMP). The shadow renders against the visible pixels, ignoring the transparent areas.

What shadow settings look most realistic for product photos?

For realistic product shadows, use a contact shadow: black color, 25-35% opacity, 8-15 px Gaussian blur, positioned as a soft ellipse directly beneath the product's base. Match the light angle to your product photography setup — 135° upper-left is standard. Avoid perfectly circular or overly large shadows, which look artificial.

Can I add shadows using only CSS without editing the image?

Yes. Use box-shadow for rectangular elements and filter: drop-shadow() for transparent images with irregular shapes. CSS shadows render in the browser, add zero bytes to image file size, and can be animated with transition for interactive effects. This is the recommended approach for web developers working with UI components and card layouts.

What is the difference between box-shadow and drop-shadow in CSS?

box-shadow applies to the element's rectangular bounding box — it shadows the box, not the content. It supports spread-radius and inset. drop-shadow() is a CSS filter that traces the alpha channel of the element's rendered content, producing a shadow that follows the actual shape. Use box-shadow for cards, panels, and rectangular images. Use drop-shadow() for transparent PNGs, SVGs, and irregularly shaped content.

How do I make a shadow look natural in a composite image?

Match three properties to the scene: direction (shadow angle must match the existing light source), softness (blur increases with distance from the surface), and color (shadows pick up ambient tones — slightly warm shadows for daylight scenes, slightly cool for overcast). Reduce opacity until the shadow is visible but not dominant. Use a gradient mask so the shadow fades as it extends away from the contact point. Consistency across all objects in the composite is more important than perfection on any single shadow.

Do shadows affect page load speed?

Shadows baked into images increase file size by 10-30% due to the additional gradient data. Compress shadowed images with Pixotter before publishing to recover most of that overhead. CSS shadows (box-shadow and drop-shadow()) add zero file size and render efficiently on modern GPUs. For pages with many shadowed images, CSS shadows are the performance-optimal choice.

How do I add a shadow to text in an image?

In Photoshop v26.3, select the text layer and apply Layer Style > Drop Shadow with offset 2-4 px, blur 4-8 px, and opacity 40-60%. In GIMP v2.10.38, use Filters > Light and Shadow > Drop Shadow on the text layer. For text on web pages, use the CSS text-shadow property: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);. Text shadows should be subtle — heavy text shadows reduce readability. For images that also need transparency adjustments for presentations, apply shadows before exporting to maintain layer control.