Filters

Filters process an element that is already drawn, like a photo editor: they blur, remove color, change brightness. They act on the whole content — text, pictures, background. This is handy for hover effects and for inactive elements.

Blur

The filter property takes one or more functions. blur() blurs an element by the given radius:

<style>
  .pic { width: 160px; height: 90px; display: inline-block; margin: 4px; background: linear-gradient(135deg, gold, crimson, mediumpurple); }
  .blur { filter: blur(4px); }
</style>
 
<div class="pic"></div>
<div class="pic blur"></div>

Filter functions

Function	What it does
`blur(4px)`	Blurs
`grayscale(1)`	Makes it black and white; `0.5` — halfway
`brightness(1.5)`	Changes brightness: above 1 is lighter
`contrast(2)`	Changes contrast
`sepia(1)`	An old photo, brown tones
`hue-rotate(90deg)`	Shifts all hues around the color wheel
`opacity(0.5)`	Transparency

<style>
  .row { display: flex; gap: 6px; flex-wrap: wrap; }
  .row div { width: 90px; height: 60px; background: linear-gradient(135deg, gold, crimson, mediumpurple); color: white; font-size: 12px; padding: 4px; }
</style>
 
<div class="row">
  <div style="filter: grayscale(1)">grayscale</div>
  <div style="filter: brightness(1.5)">brightness</div>
  <div style="filter: contrast(2)">contrast</div>
  <div style="filter: sepia(1)">sepia</div>
  <div style="filter: hue-rotate(90deg)">hue-rotate</div>
</div>

Several filters and a transition

Functions are listed with spaces and applied one after another. Filters animate smoothly — hover over the card:

<style>
  .card { width: 200px; padding: 30px 12px; color: white; background: linear-gradient(135deg, seagreen, steelblue);
    filter: grayscale(1) brightness(0.8); transition: filter 0.4s; }
  .card:hover { filter: none; }
</style>
 
<div class="card">The color appears on hover</div>

A contour shadow

box-shadow is always rectangular — it follows the frame of the block. The drop-shadow() filter follows the real shape: transparent parts cast no shadow. This matters for icons and pictures with a complex outline:

<style>
  svg { margin: 10px; }
  .box-sh { box-shadow: 4px 4px 6px gray; }
  .drop { filter: drop-shadow(4px 4px 3px gray); }
</style>
 
<svg class="box-sh" width="80" height="80" viewBox="0 0 24 24"><path fill="gold" d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z"/></svg>
<svg class="drop" width="80" height="80" viewBox="0 0 24 24"><path fill="gold" d="M12 2l3 7h7l-5.5 4.5 2 7.5-6.5-4.5-6.5 4.5 2-7.5L2 9h7z"/></svg>

On the left the shadow belongs to the square around the star, on the right to the star itself.

Frosted glass

backdrop-filter processes not the element itself but what is seen behind it. A semi-transparent block with a blurred background gives a frosted glass effect:

<style>
  .scene { padding: 24px; background: linear-gradient(135deg, gold, crimson, mediumpurple); }
  .glass { padding: 16px; background: rgb(255 255 255 / 0.3); backdrop-filter: blur(8px); border-radius: 12px; }
  .circle { width: 70px; height: 70px; border-radius: 50%; background: white; margin-bottom: -40px; }
</style>
 
<div class="scene">
  <div class="circle"></div>
  <div class="glass">The white circle behind the glass is blurred, the text is sharp</div>
</div>

Common mistake

filter blurs an element together with all its children. If you put blur() on a card to blur its background, the text blurs too:

<style>
  .card { padding: 20px; color: white; background: linear-gradient(135deg, seagreen, steelblue); filter: blur(3px); }
</style>
 
<div class="card">The text is blurred too</div>

To blur what is behind a block, use backdrop-filter. To blur only the block's own background, move the background into a separate layer — for example, an absolutely positioned element under the text.

Thanks for reading!