<div class="blur" />
<div class="brightness" />
<div class="contrast" />
<div class="drop-shadows" />
<div class="grayscale" />
<div class="hue-rotate" />
<div class="invert" />
<div class="opacity" />
<div class="saturate" />
<div class="sepia" />

.blur,
.brightness,
.contrast,
.drop-shadows,
.grayscale,
.hue-rotate,
.invert,
.opacity,
.saturate,
.sepia {
  aspect-ratio: 1 / 1;
  background-image: url("./picture.png");
  background-size: cover;
  border-radius: 100%;
  height: 5rem;
  width: 5rem;
}

.blur {
  filter: blur(0.25rem);
}

.brightness {
  filter: brightness(150%);
}

.contrast {
  filter: contrast(50%);
}

.drop-shadows {
  filter: drop-shadow(0 0 5px black);
}

.grayscale {
  filter: grayscale(100%);
}

.hue-rotate {
  filter: hue-rotate(35deg);
}

.invert {
  filter: invert(100%);
}

.opacity {
  filter: opacity(0.4);
}

.saturate {
  filter: saturate(300%);
}

.sepia {
  filter: sepia(100%);
}