CSS · Visual Effects

CSS Filters

Image and element effects with filter functions

Find videos you like?

Save to resource drawer for future reference!

CSS Filters

Photoshop-like effects in CSS

CSS Filters = Instant Effects! ✨

Apply visual effects like blur, brightness, and saturateto any element with pure CSS. No image editing software needed!

Image Effects

Hover States

Animations

Filter Functions

10 powerful filter effects

blur()

blur(5px)

Gaussian blur effect

brightness()

brightness(150%)

Adjust brightness (0-200%+)

contrast()

contrast(200%)

Adjust contrast (0-200%+)

grayscale()

grayscale(100%)

Convert to grayscale (0-100%)

saturate()

saturate(200%)

Adjust saturation (0-200%+)

hue-rotate()

hue-rotate(90deg)

Rotate hue (0-360deg)

invert()

invert(100%)

Invert colors (0-100%)

sepia()

sepia(100%)

Apply sepia tone (0-100%)

opacity()

opacity(50%)

Adjust opacity (0-100%)

drop-shadow()

drop-shadow(2px 2px 4px black)

Add drop shadow

Interactive Demo

See all filters in action

CSS Filters Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ CSS Filters Gallery</h1>
      <div class="grid">
        <div class="filter-box">
          <div class="image">CSS</div>
          <div class="label">Original</div>
        </div>
        <div class="filter-box">
          <div class="image blur">CSS</div>
          <div class="label">blur(5px)</div>
        </div>
        <div class="filter-box">
          <div class="image brightness">CSS</div>
          <div class="label">brightness(150%)</div>
        </div>
        <div class="filter-box">
          <div class="image contrast">CSS</div>
          <div class="label">contrast(200%)</div>
        </div>
        <div class="filter-box">
          <div class="image grayscale">CSS</div>
          <div class="label">grayscale(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image saturate">CSS</div>
          <div class="label">saturate(300%)</div>
        </div>
        <div class="filter-box">
          <div class="image hue-rotate">CSS</div>
          <div class="label">hue-rotate(180deg)</div>
        </div>
        <div class="filter-box">
          <div class="image invert">CSS</div>
          <div class="label">invert(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image sepia">CSS</div>
          <div class="label">sepia(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image opacity">CSS</div>
          <div class="label">opacity(50%)</div>
        </div>
        <div class="filter-box">
          <div class="image drop-shadow">CSS</div>
          <div class="label">drop-shadow()</div>
        </div>
        <div class="filter-box">
          <div class="image combined">CSS</div>
          <div class="label">Combined</div>
        </div>
        <div class="filter-box">
          <div class="image hover">Hover</div>
          <div class="label">Hover Effect</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Combining Filters

Use multiple filters together

Chain multiple filter functions separated by spaces:

/* Combine multiple filters */
.photo {
  filter: 
    brightness(110%)
    contrast(120%)
    saturate(130%);
}

/* Hover effect */
.card:hover {
  filter: brightness(90%) blur(2px);
}

Instagram-like

brightness(110%) contrast(110%) saturate(130%)

Vintage

sepia(50%) contrast(120%) brightness(90%)

Dramatic

grayscale(100%) contrast(150%)

Common Use Cases

Where to use filters

Image Effects

B&W or vintage photos

grayscale(), sepia()

Hover States

Darken on hover

brightness(), blur()

Loading States

Blur placeholder

blur(), opacity()

Disabled Elements

Show disabled

grayscale(), opacity()

Focus Attention

Highlight active

brightness(), saturate()

Remember

Combine filters with spaces

Animate filters for smooth transitions

Use backdrop-filter to filter background

Browser support: All modern browsers

Previous Topic

Transforms

2D transforms (translate, rotate, scale, skew), transform-origin, and matrix transformations.

Next Topic

Backdrop Filter

backdrop-filter property for glassmorphism effects and background blur.

Ask a Question

Have a question about Filters? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Visual Effects

CSS Filters

Image and element effects with filter functions

Find videos you like?

Save to resource drawer for future reference!

CSS Filters

Photoshop-like effects in CSS

CSS Filters = Instant Effects! ✨

Apply visual effects like blur, brightness, and saturateto any element with pure CSS. No image editing software needed!

Image Effects

Hover States

Animations

Filter Functions

10 powerful filter effects

blur()

blur(5px)

Gaussian blur effect

brightness()

brightness(150%)

Adjust brightness (0-200%+)

contrast()

contrast(200%)

Adjust contrast (0-200%+)

grayscale()

grayscale(100%)

Convert to grayscale (0-100%)

saturate()

saturate(200%)

Adjust saturation (0-200%+)

hue-rotate()

hue-rotate(90deg)

Rotate hue (0-360deg)

invert()

invert(100%)

Invert colors (0-100%)

sepia()

sepia(100%)

Apply sepia tone (0-100%)

opacity()

opacity(50%)

Adjust opacity (0-100%)

drop-shadow()

drop-shadow(2px 2px 4px black)

Add drop shadow

Interactive Demo

See all filters in action

CSS Filters Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>✨ CSS Filters Gallery</h1>
      <div class="grid">
        <div class="filter-box">
          <div class="image">CSS</div>
          <div class="label">Original</div>
        </div>
        <div class="filter-box">
          <div class="image blur">CSS</div>
          <div class="label">blur(5px)</div>
        </div>
        <div class="filter-box">
          <div class="image brightness">CSS</div>
          <div class="label">brightness(150%)</div>
        </div>
        <div class="filter-box">
          <div class="image contrast">CSS</div>
          <div class="label">contrast(200%)</div>
        </div>
        <div class="filter-box">
          <div class="image grayscale">CSS</div>
          <div class="label">grayscale(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image saturate">CSS</div>
          <div class="label">saturate(300%)</div>
        </div>
        <div class="filter-box">
          <div class="image hue-rotate">CSS</div>
          <div class="label">hue-rotate(180deg)</div>
        </div>
        <div class="filter-box">
          <div class="image invert">CSS</div>
          <div class="label">invert(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image sepia">CSS</div>
          <div class="label">sepia(100%)</div>
        </div>
        <div class="filter-box">
          <div class="image opacity">CSS</div>
          <div class="label">opacity(50%)</div>
        </div>
        <div class="filter-box">
          <div class="image drop-shadow">CSS</div>
          <div class="label">drop-shadow()</div>
        </div>
        <div class="filter-box">
          <div class="image combined">CSS</div>
          <div class="label">Combined</div>
        </div>
        <div class="filter-box">
          <div class="image hover">Hover</div>
          <div class="label">Hover Effect</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Combining Filters

Use multiple filters together

Chain multiple filter functions separated by spaces:

/* Combine multiple filters */
.photo {
  filter: 
    brightness(110%)
    contrast(120%)
    saturate(130%);
}

/* Hover effect */
.card:hover {
  filter: brightness(90%) blur(2px);
}

Instagram-like

brightness(110%) contrast(110%) saturate(130%)

Vintage

sepia(50%) contrast(120%) brightness(90%)

Dramatic

grayscale(100%) contrast(150%)

Common Use Cases

Where to use filters

Image Effects

B&W or vintage photos

grayscale(), sepia()

Hover States

Darken on hover

brightness(), blur()

Loading States

Blur placeholder

blur(), opacity()

Disabled Elements

Show disabled

grayscale(), opacity()

Focus Attention

Highlight active

brightness(), saturate()

Remember

Combine filters with spaces

Animate filters for smooth transitions

Use backdrop-filter to filter background

Browser support: All modern browsers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Transforms

Backdrop Filter

Building Your Learning Module...

CSS Filters

CSS Filters = Instant Effects! ✨

CSS Filters Gallery

Remember

Transforms

Backdrop Filter

CSS Filters

CSS Filters = Instant Effects! ✨

CSS Filters Gallery

Remember