This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 21610 - drop-shadow with support for inset shadow
Summary: drop-shadow with support for inset shadow
Alias: None
Product: CSS
Classification: Unclassified
Component: Filter Effects (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Dean Jackson
QA Contact: public-css-bugzilla
Depends on:
Reported: 2013-04-07 19:11 UTC by Dirk Schulze
Modified: 2013-11-03 21:12 UTC (History)
3 users (show)

See Also:


Description Dirk Schulze 2013-04-07 19:11:52 UTC
Currently the drop-shadow shorthand filter does not support inset shadows and the inset keyword (in comparison to box-shadow for instance). I wonder if this could be added to the spec and would like to hear implementers input.

Most shorthands have the advantage that they can easily be HW accelerated. This already seems not always be the case for drop-shadow on some platforms. However,  I do not think that it is harder to implement inset shadow, even if it will be of course slower than other filters.

Here is a short example how to use inset shadows with SVG Filters today[1]:

		<filter id="innershadow" x0="-50%" y0="-50%" width="200%" height="200%">
			<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
			<feOffset dy="3" dx="3"/>
			<feComposite in2="SourceAlpha" operator="arithmetic"
					k2="-1" k3="1" result="shadowDiff"/>
			<feFlood flood-color="black" flood-opacity="1"/>
			<feComposite in2="shadowDiff" operator="in"/>
			<feComposite in2="SourceGraphic" operator="over"/>

Implementations could replace the inset shadow in the CSS string with an equivalent filter chain as above.