Free • private • instant

Icon Shadow Generator Online

Give any icon real depth. Drag the shadow into place, tune the finish live, then copy clean CSS or download a transparent PNG.

No upload to a server No watermark CSS & PNG export
Shadow studioSample icon loaded
01Place the shadowDrag the icon to change its direction
LIVE
Icon with a custom drop shadow
Drag the icon to move its shadow Drop your icon herePNG, SVG or WebP up to 20 MB

Shadows that follow the icon, not the box

Build a natural shadow around transparent artwork without wrestling with a full design app.

↗

Drag into place

Move the shadow visually or use exact horizontal and vertical pixel controls.

CSS

Copy clean code

Get a production-ready filter: drop-shadow() value for websites and apps.

PNG

Export transparency

Download a ready-to-use transparent PNG or WebP at a crisp resolution.

How to add a shadow to an icon online

  1. 1
    Upload your icon

    Choose a transparent PNG, SVG or WebP, drag it onto the preview, or use the built-in sample.

  2. 2
    Choose a shadow style

    Start with Float, Soft, Bold, Neon or Sunset to find the right visual direction quickly.

  3. 3
    Fine-tune the depth

    Adjust the position, blur, opacity, color and layers. Drag the direction pad for a fast, tactile edit.

  4. 4
    Copy CSS or download

    Copy the drop-shadow filter for the web, or export the icon as a transparent PNG or WebP.

TIP

Start subtle for interface icons

Small UI icons usually need a soft shadow with low opacity. Save bold, colorful shadows for app icons, social graphics and hero artwork.

CSS drop-shadow vs. box-shadow

For a transparent icon, filter: drop-shadow() follows the visible pixels of the artwork. A regular box-shadow follows the rectangular element box instead, which can leave an unwanted rectangular shadow around PNG or SVG icons. This icon shadow generator writes layered drop-shadow filters that preserve the original silhouette.

Tips for better icon shadows

Keep the light direction consistent across a layout. If the shadow moves down and right, the implied light source sits above and left. Increase blur and reduce opacity for a floating effect; use a smaller blur and higher opacity when you want a graphic, sticker-like finish. Leave enough export padding so soft shadows are not clipped.

Icon shadow generator FAQ

How do I add a shadow to an icon online?

Upload a transparent icon, pick a preset and adjust the shadow position, color, blur and opacity. Copy the CSS filter or download the finished image.

Is this icon shadow generator online and free?

Yes. It is free to use online, needs no sign-up and does not add a watermark.

Why use drop-shadow instead of box-shadow?

Drop-shadow follows the visible shape and transparent edges of an icon. Box-shadow follows the element's rectangular box.

Can I export a transparent icon shadow?

Yes. Use the checkerboard preview and download as PNG or WebP. Those formats preserve transparent backgrounds.

Which icon formats work?

You can upload PNG, SVG and WebP icons up to 20 MB. Transparent artwork gives the cleanest silhouette.

Are uploaded icons stored?

No. The generator processes the icon locally in your browser. It is not sent to a server.

Try other free design tools

Keep polishing icons and interface details with these browser-based tools.

CSSCSS Shadow GeneratorBuild layered shadows for cards, buttons and panels. SPRIcon Sprite GeneratorPack multiple icons into a PNG atlas with CSS. BADGEBadge GeneratorCreate polished SVG and PNG badges online.