BaselineLab

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.

HTML 
<div class="filter-demo" role="img" aria-label="Filtered image"></div>
CSS 
.filter-demo {
  block-size: min(20rem, 100%);
  background-image: url("https://baselinelab.dev/baseline-wordmark.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: blur(4px);
}