.my-element {
filter: blur(0.2em);
}
Blur Filter
.my-element {
filter: brightness(80%);
}
Brightness Filter
.my-element {
filter: contrast(160%);
}
Contrast Filter
.my-element {
filter: grayscale(80%);
}
Grayscale Filter
.my-element {
filter: invert(1);
}
Invert Filter
.my-element {
filter: opacity(0.3);
/* opacity: 0.3; */
}
Opacity Filter
.my-element {
filter: saturate(155%);
}
Saturate Filter
.my-element {
filter: sepia(70%);
}
Sepia Filter
.my-element {
filter: hue-rotate(20deg);
}
Hue-rotate Filter
.my-element {
filter: drop-shadow(5px 5px 10px orange);
/* offset-x, offset-y, blur, color */
}
Drop-Shadow Filter
.my-element h1 {
padding: 1.5em;
background: background: rgba(183, 21, 64, 35%);
backdrop-filter: blur(10px) saturate(180%);
/* filter: blur(30px) saturate(180%); */
z-index: 1;
font-weight: bold;
text-transform: uppercase;
}
Back-drop Filter
The backdrop-filter property accepts all of the same filter function values as filter. The difference is the backdrop-filter only applies to the background, where the filter property applies it to the whole element.
Glassmorphic Effect:
add a bit of transparency to the background, then add blur and saturate filter
Box-Shadow Filter,
Drop Shadow - W3_D4,
figure img {
box-shadow: 0px 0px 20px rgba(0 0 0 / 30%);
}
Box-Shadow Filter:
Inset (optional),
Horizontal offset,
Vertical offset,
Blur radius,
Spread radius (optional),
Color
Box-Shadow Filter:
figure img {
box-shadow: 5px 5px 20px 5px darkslateblue,
-5px -5px 20px 5px dodgerblue,
inset 0px 0px 10px 2px darkslategray,
inset 0px 0px 20px 10px steelblue;
}
Multiple Box-Shadow Filter: