filter blur() css code example

Example 1: how to blur background color in css

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

Example 2: css filter property

.blur {
  filter: blur(4px);
}
.brightness {
    filter: brightness(0.30);
}
.contrast {
    filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
    filter: sepia(100%);
}
.shadow {
    filter: drop-shadow(8px 8px 10px green);
} 






/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: unset;