BaselineLab

Playground de filter en CSS

Explora filter activando varias funciones a la vez, ajusta sus valores y prueba el resultado sobre una imagen o un fondo de color antes de copiar el CSS generado.

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);
}