CSS filter playground

Explore filter by enabling multiple functions at once, adjust their values, and test the result on an image or a color background before copying the generated CSS.

Surface

Filter applies graphical effects to images, backgrounds and borders.

Apply to

Image URL

Background color

HTML

<div class="filter-demo" role="img" aria-label="Filtered image"></div>

CSS

.filter-demo {
  min-block-size: 20rem;
  background-image: url("https://baselinelab.dev/baseline-wordmark.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: blur(4px);
}