LESS Mixin for CSS/SVG Filter Drop Shadows

css-shadow-mixin.less

// 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;
  }
}

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