Design Atlas
한국어
✦ Visual effects

CSS filter() functions

CSS filter() 함수

blur, brightness, contrast, grayscale, hue-rotate, invert, sepia, saturate — cycling each filter() function over the same image so you can compare them by eye.

Also known as: filter propertyblur/brightness/contrast
···
html
<div class="wrap"><div class="stage"><div class="photo" id="p"></div></div><div class="label" id="l">filter: none</div></div>
css
.wrap{position:relative;display:grid;place-items:center}
.stage{width:min(72vmin,320px);aspect-ratio:4/3;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.photo{position:absolute;inset:0;transition:filter .5s ease;background:
  radial-gradient(circle at 28% 30%,#ffd166 0 16%,transparent 17%),
  radial-gradient(circle at 70% 65%,#f25c8a 0 12%,transparent 13%),
  linear-gradient(180deg,#5b5bf7 0%,#18c29c 60%,#0d0d12 100%)}
.label{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1.4 monospace}
js
const FILTERS = ['blur(6px)','brightness(1.7)','contrast(2)','grayscale(1)','hue-rotate(140deg)','invert(1)','sepia(1)','saturate(3.5)'];
const p = document.getElementById('p');
const l = document.getElementById('l');
let i = 0;
function apply(){ const css = FILTERS[i]; p.style.filter = css; l.textContent = 'filter: ' + css; i = (i + 1) % FILTERS.length; }
apply();
setInterval(apply, 1400);

filter post-processes an element's own pixels. You can chain functions with spaces, not commas (`filter: blur(2px) brightness(1.2)`), applied left to right.

blur() is a Gaussian blur; brightness/contrast/saturate scale pixel values; grayscale/sepia/invert are colour transforms; hue-rotate spins the colour wheel. Every one of them is shorthand for an SVG filter primitive, so for finer control you can write your own SVG filter and reference it with filter: url(#id).

The usual trap is performance — bigger blur radii and bigger elements cost more GPU time, and animating filter on a large image every frame visibly stutters. filter also creates a new stacking context, same as opacity or transform, trapping any child z-index inside it.

In practice most uses touch one value: blur for a loading skeleton, grayscale for a disabled state, hue-rotate to retint an illustration for dark mode.

When to use

Safest when you flip a single value to express state (disabled = grayscale, loading = blur). Avoid animating a large blur on a full-bleed image every frame.