Filters on HTML Elements

The CSS filter property (Baseline since 2016) brings filters to any element. Its functions, blur(), drop-shadow(), grayscale() and seven more, are defined as SVG primitive chains, and url(#id) applies a whole SVG <filter>. backdrop-filter (Baseline since September 2024) filters what lies behind an element.

box-shadow versus drop-shadow(), a grayed star, and an SVG filter on HTML textHTMLLive

<style>
  body { display:flex; gap:24px; align-items:center; font:bold 22px Georgia; color:#e09a10 }
  .i { width:90px; height:90px; fill:currentColor; display:block }
  .box { box-shadow:5px 5px 5px #0006 }  .drop { filter:drop-shadow(5px 5px 3px #0006) }
  .sold { filter:grayscale(1) opacity(.6) }  .wavy { filter:url(#wavy) }
</style>
<svg width="0" height="0" style="position:absolute">
  <symbol id="star" viewBox="0 0 24 24"><path d="M12 2.6 14.5 9.2 21.5 9.5 16 13.9 17.9 20.7 12
    16.8 6.1 20.7 8 13.9 2.5 9.5 9.5 9.2Z"/></symbol>
  <filter id="wavy"><feTurbulence type="fractalNoise" baseFrequency=".03 .09" numOctaves="2"/>
    <feDisplacementMap in="SourceGraphic" scale="10" xChannelSelector="R"
      yChannelSelector="G"/></filter></svg>
<svg class="i box"><use href="#star"/></svg> <svg class="i drop"><use href="#star"/></svg>
<svg class="i sold"><use href="#star"/></svg>
<div class="wavy">Salt &amp;<br>Saffron</div>

Browser output of 25

drop-shadow() shadows the alpha, so it follows the star; grayscale(1) opacity(.6) marks a sold-out title; the wavy heading is selectable HTML text displaced as in Blur and Turbulence.

MENU