> Markdown version of [/magazine/675-adding-shadows-to-irregular-shapes-in-css-with-filter-drop-shadow](https://www.wearedevelopers.com/magazine/675-adding-shadows-to-irregular-shapes-in-css-with-filter-drop-shadow). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Adding shadows to irregular shapes in CSS with filter: drop-shadow() **By:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann) **Published:** January 5, 2026 CSS shadows are great to make things stand out, become more readable and give your designs a sense of depth. The problem is though that whilst `text-shadow` does only add a shadow to the letters, adding a `box-shadow` to an image will always show a rectangular shadow, regardless of the transparency of the image. ![box shadow demo](https://wearedevelopers.imgix.net//magazine/articles/675/images/content/TsZIowwQpsNlnOeLXsUl-1767631392.gif) You can work around that by using `filter: drop-shadow()` instead. This filter recognises the transparent parts of the image or the shape of the SVG path and applies the shadow accordingly. ![drop shadow demo](https://wearedevelopers.imgix.net//magazine/articles/675/images/content/QsH3oA0ggfewEYFeQHBN-1767631392.gif) You can see and the difference and play with it [in this codepen](https://codepen.io/codepo8/pen/qENbVmb): [![codepen showing the difference between box shadow and drop shadow](https://wearedevelopers.imgix.net/storage/temp/FGBSoUeSaIA9VikMkmub.gif)](https://codepen.io/codepo8/pen/qENbVmb) There are two problems with this though. The first one is about developer tools. Chromium Developer tools show a nifty shadow editor when you use `text-shadow` or `box-shadow`: ![dropshadow editor](https://wearedevelopers.imgix.net//magazine/articles/675/images/content/rqKzJP5mB5LhbSydWrFP-1767631392.gif) This editor doesn’t get triggered by the filter yet. I [filed a bug with Edge Devtools](https://github.com/MicrosoftEdge/DevTools/issues/405), so this might be remedied soon. The second issue is when you want to do a rollover drop-shadow effect. With an SVG, you can apply the hover to the path to get the effect, but with an image you will always trigger the hover on the whole image, not exclusively on the parts that are visible. I’ve [written a workaround 13 years ago](https://github.com/codepo8/irregular-shape-rollover/), that uses canvas to offer that functionality: ![Irregular shape rollover demo page in action](https://wearedevelopers.imgix.net//magazine/articles/675/images/content/RTAzAXNpVTpSRamEldPG-1767631392.gif) - When you roll over the image, the script copies it to a canvas and detects the colour at the current mouse position. - If the colour is not transparent, it adds a class called `over` to the image. - If it is not transparent it removes the class. ![rollovers demo showing the changes to the HTML with classes added and removed](https://wearedevelopers.imgix.net//magazine/articles/675/images/content/X0J0brVkodhl39UuBvlt-1767631392.gif) That way you can trigger drop shadows on the irregular shape only when the cursor is on any of the visible parts. It would be great if we had a way in CSS to do the same, but clipping and masking only have a visual outcome, they don’t limit the interaction area. ## Related Articles - [Creating a Spotlight Text Effect with CSS and JavaScript](https://www.wearedevelopers.com/magazine/637-creating-a-spotlight-text-effect-with-css-and-javascript) - [Building a "shoutout" component in plain HTML/CSS/JavaScript](https://www.wearedevelopers.com/magazine/556-building-a-shoutout-component-in-plain-html-css-javascript) - [Tether Elements Without JavaScript with CSS Anchor Positioning](https://www.wearedevelopers.com/magazine/714-tether-elements-without-javascript-with-css-anchor-positioning) - [The Overflow: 5 Tools for Working with SVGs](https://www.wearedevelopers.com/magazine/707-the-overflow-5-tools-for-working-with-svgs) ## Related Videos - [Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements](https://www.wearedevelopers.com/videos/1247-tips-and-tricks-css-pseudo-class-selectors-and-pseudo-elements) - [Rendering Design Software in the Browser at Penpot](https://www.wearedevelopers.com/videos/1353-rendering-design-software-in-the-browser-at-penpot) - [One Color to Rule Them All: Relative CSS Colors in Practice](https://www.wearedevelopers.com/videos/100016-one-color-to-rule-them-all-relative-css-colors-in-practice) - [What's new in CSS for Designers?](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) ## Related Jobs - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse** - [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**