CSS Filters

Edit Copy Hide

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

Edit Copy Hide

<img src="image.jpg" alt="Grayscale Image" class="grayscale-image">

This example applies the grayscale filter to an image, converting it to grayscale. The filter property with the value grayscale(100%) is used to remove color from the image.

Preview :

Edit Copy Hide

.blurred-box {
  filter: blur(5px);
}

Edit Copy Hide

<div class="blurred-box">Blured Text Example</div>

This example applies the blur filter to a <div> element, creating a blurred background or element. The filter property with the value blur(5px) is used to add a blur effect, with a blur radius of 5px.

Edit Copy Hide

.bright-text {
  filter: brightness(150%);
}

Edit Copy Hide

     <p class="bright-text">Bright Text</p>

This example increases the brightness of a paragraph element, making the text appear brighter. The filter property with the value brightness(150%) is used to enhance the brightness to 150% of the original brightness.

Edit Copy Hide

.high-contrast-image {
      filter: contrast(200%);
      width: 200px;
      height: 200px;
      background-color: gray;
    }

Edit Copy Hide

  <div class="high-contrast-image">Content Here</div>

This example applies the contrast filter to a <div> element, enhancing the contrast between light and dark areas of the element. The filter property with the value contrast(200%) is used to increase the contrast to 200% of the original contrast.

Edit Copy Hide

  .rotated-text {
      transform: rotate(90deg);
            display: inline-block; /* Ensure the element takes up space */
    }

Edit Copy Hide

<span class="rotated-text">Rotated Text</span>

This example rotates the hue of a <span> element, changing the color appearance of the text. The filter property with the value hue-rotate(90deg) is used to rotate the hue by 90 degrees.

Edit Copy Hide

.desaturated-box {
  filter: saturate(50%);
     width: 200px;
      height: 200px;
      background-color: lightgray;
}

Edit Copy Hide

<div class="desaturated-box">Desaturated box example</div>

This example reduces the saturation of a <div> element, making the colors appear less vibrant. The filter property with the value saturate(50%) is used to decrease the saturation to 50% of the original saturation.

Edit Copy Hide

.inverted-image {
  filter: invert(100%);
}

Edit Copy Hide

<img src="image.jpg" alt="Inverted Image" class="inverted-image">

This example applies the invert filter to an image, inverting its colors. The filter property with the value invert(100%) is used to completely invert the colors of the image.

Preview :

Edit Copy Hide

 .shadowed-box {
      filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
      width: 200px;
      height: 200px;
      background-color: lightgray;
    }

Edit Copy Hide

  <div class="shadowed-box">Content Here</div>

This example adds a drop shadow effect to a <div> element, creating a shadow behind the element. The filter property with the value drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3)) is used to apply a drop shadow with a horizontal offset of 3 pixels, a vertical offset