Filters in CSS

.my-element {
  filter: blur(0.2em);
}

Filters In CSS

Blur Filter

.my-element {
  filter: brightness(80%);
}

Filters In CSS

Brightness Filter

.my-element {
  filter: contrast(160%);
}

Filters In CSS

Contrast Filter

.my-element {
  filter: grayscale(80%);
}

Filters In CSS

Grayscale Filter

.my-element {
  filter: invert(1);
}

Filters In CSS

Invert Filter

.my-element {
  filter: opacity(0.3);
/*  opacity: 0.3; */
}

Filters In CSS

Opacity Filter

.my-element {
  filter: saturate(155%);
}

Filters In CSS

Saturate Filter

.my-element {
  filter: sepia(70%);
}

Filters In CSS

Sepia Filter

.my-element {
  filter: hue-rotate(20deg);
}

Filters In CSS

Hue-rotate Filter

.my-element {
  filter: drop-shadow(5px 5px 10px orange);
  
/*   offset-x, offset-y, blur, color */
}

Filters In CSS

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

Filters In CSS

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

Shadows in CSS

Shadows In CSS

Box-Shadow Filter, 

Drop Shadow - W3_D4,

Text Shadow - W2_D2

figure img {
  box-shadow: 0px 0px 20px rgba(0 0 0 / 30%);
}

Shadows In CSS

Box-Shadow Filter:

Inset (optional),

Horizontal offset,
Vertical offset,
Blur radius,
Spread radius (optional),
Color

Shadows In CSS

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

Shadows In CSS

Multiple Box-Shadow Filter:

W3_D4

By Yash Priyam

W3_D4

  • 126

More from Yash Priyam