Overview
Introduction
This tool adds a drop shadow behind an icon, entirely in your browser, giving flat icon artwork a sense of depth.
It's the same shadow-compositing operation used by the site's general PNG shadow adder, applied here to icon-sized assets.
What Is Icon Shadow Adder?
A client-side icon shadow generator that reads an uploaded icon's pixel data, builds a blurred and offset copy of its silhouette tinted with a chosen color, and alpha-composites the original icon back on top of that shadow layer.
It supports both hard-edged shadows (blur radius 0) and soft, blurred shadows for a more realistic elevated look.
How Icon Shadow Adder Works
The tool first builds a same-shaped silhouette of the icon's opaque pixels tinted with the shadow color, scaling the shadow's alpha by each source pixel's own alpha so partially-transparent edges cast a proportionally lighter shadow.
That silhouette is blurred by the chosen radius, offset by the chosen X/Y amount, and the original icon is composited on top using standard alpha-over blending.
When To Use Icon Shadow Adder
Use it to give a flat app icon or logo mark a subtle sense of elevation for a card, button, or hero section.
It's also useful for making a light-colored icon stand out against a busy or similarly-light background.
Often used alongside Icon Outline Adder and Translucent Icon Creator.
Features
Advantages
- Runs entirely client-side; the uploaded icon is never sent to a server.
- Shadow follows the icon's actual silhouette rather than a bounding-box rectangle.
- Fully adjustable offset, blur radius, and shadow color/alpha.
Limitations
- Large blur radii on large icons can take a moment to process, since blurring is computed pixel by pixel.
- Very small offset/blur combinations may produce a shadow that's barely visible behind the icon itself; increase the offset for a clearer separation.
Examples
Best Practices & Notes
Best Practices
- Keep offset and blur proportional to the icon's size — small icons need subtler shadows.
- Lower the shadow color's alpha for a softer, more realistic effect than a fully opaque shadow.
Developer Notes
The pure shadow-compositing math lives in a lib function that thinly re-exports the shared drop-shadow function (also used by the general-purpose PNG shadow adder) under this icon-specific name, since an icon is just a PNG once uploaded and the underlying blur/composite pipeline is identical.
Icon Shadow Adder Use Cases
- Adding depth to a flat app icon for a marketing page
- Making a light icon readable against a light background
- Creating a consistent shadow style across a set of icons
Common Mistakes
- Setting the blur radius so high relative to the icon size that the shadow overwhelms the icon itself.
- Forgetting the output canvas is larger than the input, which can surprise a pipeline expecting the original dimensions.
Tips
- Start with a small offset and blur, then increase gradually until the depth effect reads clearly at the icon's intended display size.
- Use a lower shadow alpha (150-180) for a subtler, more natural-looking shadow than full opacity.