Skip to content

Instantly share code, notes, and snippets.

@brysongilbert
Created October 15, 2012 01:48
Show Gist options
  • Save brysongilbert/3890436 to your computer and use it in GitHub Desktop.
Save brysongilbert/3890436 to your computer and use it in GitHub Desktop.
LESS Mixin for CSS/SVG Filter Drop Shadows
// Drop shadow using SVG/CSS filters were possible
// Requires Modernizr and the css-filters and svg-filters community add-ons
.filter-shadow(@x, @y, @size, @color) {
// Firefox 10+
.svgfilters & {
@svgSize: @size/2; // the SVG blur is a little larger than the CSS equivalent
filter: url('data:image/svg+xml;utf8,<svg%20height="100"%20xmlns="http://www.w3.org/2000/svg"><filter%20id="drop-shadow"><feGaussianBlur%20in="SourceAlpha"%20stdDeviation="@{svgSize}"/><feOffset%20dx="@{x}"%20dy="@{y}"%20result="offsetblur"/><feFlood%20flood-color="@{color}"/><feComposite%20in2="offsetblur"%20operator="in"/><feMerge><feMergeNode/><feMergeNode%20in="SourceGraphic"/></feMerge></filter></svg>#drop-shadow');
}
// Chrome 19+, Safari 6+
.cssfilters & {
-webkit-filter: drop-shadow(@arguments);
filter: drop-shadow(@arguments);
}
// Everything else that supports conventional box-shadows
.no-cssfilters.no-svgfilters & {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
}
@brysongilbert
Copy link
Author

At some point, this stopped working in Firefox. Not sure why yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment