Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

All You Need to Know About CSS Filter

Here’s all you need to know about CSS Filter, a powerful tool for modifying the appearance of elements on a web page!

An Overview of CSS Filters

CSS filters give web developers powerful control over the visual styling of HTML elements. With just a few lines of code, filters can be used to transform the appearance of text, images, backgrounds, and more on a webpage.

At a high level, CSS filters work by taking the pixel values of an element and manipulating them algorithmically to achieve various effects. For example, filters can blur, distort, adjust color hues, change brightness/contrast, and more.

CSS filters are applied using the filter property and value functions. There are currently 11 different filter functions available:

  • blur() – Applies a Gaussian blur to the element

  • brightness() – Adjusts the brightness of the element

  • contrast() – Adjusts the contrast of the element

  • drop-shadow() – Applies a drop-shadow effect

  • grayscale() – Converts the element to grayscale

  • hue-rotate() – Shifts the hue values of the element

  • invert() – Inverts the colors of the element

  • opacity() – Sets the opacity level of the element

  • saturate() – Adjusts color saturation of the element

  • sepia() – Converts the element to sepia tones

  • url() – Applies a filter defined in an SVG file

Multiple filters can be chained together on a single element to create interesting and complex effects. Filters provide enormous creative possibilities without having to edit the actual image or content files themselves.

How Do CSS Filters Work?

CSS filters are applied using the filter property and value functions. The basic syntax is:

.element {
  filter: function(value);
}

The filter property accepts one or more space-separated filter functions. Each function applies an algorithmic transformation to the visual output of the element.

For example, to apply a blur filter:

.blur {
  filter: blur(5px);
}

This will blur the element by 5px using a Gaussian algorithm. The value inside the function can be different units like px, em, %, etc depending on the specific filter.

Some Common Filter Usage Examples

/* Brighten image by 20% */
img {
  filter: brightness(1.2);
}

/* Add drop shadow */
h1 {
  filter: drop-shadow(2px 2px 6px rgba(0,0,0,0.5));
}

/* Shift hue by 90 degrees */
.hue {
  filter: hue-rotate(90deg);
}

Filters open up lots of creative possibilities with just a few lines of CSS. They allow designers to achieve complex visual effects easily in the browser.

Detailed Explanation of Blur

The CSS blur() filter applies a Gaussian blur to an image, making it appear softer and less defined. The filter takes a single parameter, radius, which specifies the strength of the blur. A larger radius value will produce a more pronounced blur.

Syntax

.element {
  filter: blur(radius);
}

How the Blur Filter Works

The blur() filter works by blending each pixel of the image with its neighboring pixels. The amount of blending is determined by the radius parameter. A larger radius value will cause the pixels to be blended more, resulting in a more pronounced blur.

Here are some examples of how to use the blur() filter in CSS:

/* Blur an image by 5px */
.blur {
  filter: blur(5px);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="blur"/>
</div>

Blur

Advanced Techniques with the Blur Filter

The blur() filter can also be used to create more advanced effects, such as:

  • Background blur: Blurring the background of an element can help to focus the user’s attention on the element’s content. This is often used in modal dialogs and other pop-up windows.

  • Text blur: Blurring text can give it a softer, more organic look. This is often used in headlines and other large text elements.

  • Selective blur: You can use the blur() filter to blur only specific parts of an image or element. This can be done by using CSS masks to clip the filter to the desired area.

Checkout this YouTube video on 24 CSS Filter Property

Detailed Explanation of Brightness

The CSS brightness filter applies a linear multiplier to the input image, making it appear more or less bright. The syntax is as follows:

.element {
  filter: brightness(amount);
}

The amount parameter can be specified as a percentage or a number. A value of 0% will create a completely black image, while a value of 100% will leave the image unchanged. Values less than 100% will darken the image, while values greater than 100% will brighten it.

The brightness filter works by multiplying each color component of the input image by the amount parameter. This has the effect of increasing or decreasing the brightness of all colors in the image by the same percentage.

The following code example shows how to use the brightness filter to darken an image by 50%:

.brightness {
  filter: brightness(50%);
}
<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="brightness"/>
</div>
Brightness

Practical Use Cases for the Brightness Filter

The brightness filter can be used for a variety of purposes, such as:

  • Adjusting the brightness of an image to match the surrounding environment

  • Creating a fade-in or fade-out effect for an image

  • Creating a black-and-white image

  • Creating a silhouette effect

Performance Considerations

The brightness filter is relatively lightweight, so it should not have a significant impact on the performance of your website. However, it is important to note that the brightness filter will not work on images that are embedded in SVG files.

Detailed Explanation of Contrast

The syntax of the contrast filter is as follows:

.element {
  filter: contrast(amount);
}

Where amount is a number or percentage that specifies the amount of contrast to apply. A value of 0% creates a completely gray image, while a value of 100% leaves the input image unchanged. Values over 100% increase the contrast, while values under 100% decrease the contrast.

The contrast filter works by adjusting the lightness of each pixel in the image. The lightness of a pixel is a measure of how bright it is, relative to other pixels in the image. The contrast filter increases the lightness of lighter pixels and decreases the lightness of darker pixels. This makes the difference in lightness between adjacent pixels more pronounced, which increases the perceived contrast of the image.

The following code examples demonstrate how to use the contrast filter to achieve different effects:

/* Reduce the contrast of an image by 50% */
.contrast {
  filter: contrast(50%);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="contrast"/>
</div>

Contrast

When using the contrast filter, it is important to keep the following best practices in mind:

  • Do not increase the contrast too much, as this can make the image look harsh and unpleasant.

  • Be careful when using the contrast filter on text, as too much contrast can make the text difficult to read.

  • Use the contrast filter to improve the accessibility of your website or web application by ensuring that there is sufficient contrast between text and background colors.

Detailed Explanation of Grayscale

The CSS grayscale() filter converts the input image to grayscale. It takes a single parameter, amount, which specifies the proportion of the conversion. A value of 100% makes the image completely grayscale, while a value of 0% leaves the input unchanged. Values between 0% and 100% have linear multipliers on the effect.

The grayscale() filter works by converting each color in the image to a weighted average of red, green, and blue. The weights used are determined by the amount parameter. A value of 100% results in equal weights for all three colors, while a value of 0% leaves the colors unchanged.

The following code snippet shows how to use the grayscale() filter to make an image 100% grayscale:

.grayscale {
  filter: grayscale(100%);
}
<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="grayscale"/>
</div>
Grayscale

The grayscale() filter can be a very useful tool for creating a variety of effects, from completely grayscale images to subtler effects that reduce saturation or create a black-and-white look.

Detailed Explanation of Hue-Rotate

The CSS hue-rotate filter takes a single argument, which is the angle of rotation in degrees. A value of 0deg leaves the image unchanged, while a positive value rotates the hues clockwise and a negative value rotates them counterclockwise. The maximum value is 360deg and values above that are wrapped around.

The syntax for the hue-rotate filter is as follows:

.element {
  filter: hue-rotate(<angle>);
}

How the Hue-rotate Filter Works

The hue-rotate filter works by rotating the hue of each pixel in the image around the color wheel. The color wheel is a circular representation of colors, with red at the 0-degree mark and then the other colors following in a clockwise direction, with green at 120 degrees, blue at 240 degrees, and then back to red at 360 degrees.

When the hue-rotate filter is applied to an image, each pixel in the image is rotated around the color wheel by the specified angle. For example, a hue-rotate(90deg) filter would rotate all of the pixels in the image by 90 degrees, which would change red pixels to green, green pixels to blue, and blue pixels to red.

The following code examples demonstrate how to use the hue-rotate filter to achieve different effects:

/* Rotate all hues by 90 degrees */
.hue-rotate {
  filter: hue-rotate(90deg);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="hue-rotate"/>
</div>

Hue-rotate

Detailed Explanation of Invert

The CSS invert() filter inverts the color samples in the input image. It takes a single parameter, which is the amount of inversion to apply. A value of 100% completely inverts the image, while a value of 0% leaves the image unchanged. Values between 0% and 100% apply linear multipliers to the effect.

The following is the syntax for the invert() filter:

.element {
  filter: invert(<value>);
}

where <value> is the amount of inversion to apply, specified as a number or a percentage.

The invert() filter works by subtracting the color samples in the input image from the maximum possible color values. For example, to invert a red pixel, the invert() filter would subtract the red value from 255 (the maximum possible red value). This would result in a black pixel since black is the absence of all colors.

The following code example shows how to use the invert() filter to invert an image by 100%:

.invert {
  filter: invert(100%);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="invert"/>
</div>

Invert

Creative Use Cases for the Invert Filter

The invert() filter can be used to create a variety of creative effects. For example, it can be used to create a negative image effect or to create a high-contrast image effect. It can also be used to create a variety of other effects, such as:

  • Highlighting text or other elements: By inverting the colors of a background element, you can make text or other elements stand out more.

  • Creating a sense of depth: By inverting the colors of objects in the foreground, you can create a sense of depth in your images.

  • Creating a surreal or otherworldly effect: By inverting the colors of an image, you can create a surreal or otherworldly effect.

Detailed Explanation of Opacity

The CSS opacity filter is a powerful tool for creating transparent elements on a web page. It can be used to create everything from subtle effects, such as fading in or out an element, to dramatic effects, such as making an element completely invisible.

The opacity filter syntax is as follows:

.element {
  opacity: <number> | <percentage>;
}

The <number> or <percentage> value represents the opacity of the element, where 0 is completely transparent and 1 is completely opaque. Values between 0 and 1 represent different levels of transparency.

How the Opacity Filter Works

The opacity filter works by multiplying the alpha channel of each pixel in the element by the specified opacity value. The alpha channel represents the transparency of a pixel, with a value of 0 being completely transparent and a value of 255 being completely opaque.

When the opacity filter is applied to an element, all of its child elements are also made transparent, even if they have their opacity values. This is because the opacity filter is applied to the entire element tree, not just to the individual elements.

The following code examples demonstrate how to use the opacity filter to create a transparency effect:

/* Make an element 50% transparent */
.opacity {
  opacity: 0.5;
}
<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="opacity"/>
</div>

Opacity

Use Cases for the Opacity Filter

The opacity filter can be used for a variety of purposes, including:

  • Creating fading effects

  • Making elements semi-transparent

  • Making elements disappear or appear

  • Creating hover effects

  • Creating interactive elements

Detailed Explanation of Saturate

The CSS saturate() filter is used to adjust the saturation levels of an image. It takes a single argument, which specifies the amount of saturation to apply. The argument can be either a percentage value or a number. A value of 100% leaves the image unchanged, while a value of 0% makes the image completely unsaturated. Values over 100% will super-saturate the image.

The saturate() filter works by adjusting the intensity of each color channel in the image. It does this by multiplying each color channel by a value between 0 and 1. A value of 1 leaves the color channel unchanged, while a value of 0 sets the color channel to black. Values between 0 and 1 will desaturate the image, while values greater than 1 will super-saturate the image.

Here is an example of how to use the saturate() filter:

/* Desaturate the image by 50% */
.saturate {
  filter: saturate(50%);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="saturate"/>
</div>

Saturate

The saturate() filter is a versatile tool that can be used to create a variety of effects. It is a good idea to experiment with the different settings to see how they affect the images on your website.

Detailed Explanation of Sepia

The CSS sepia() filter converts an image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>.

The sepia() filter takes a single parameter, which is a number or percentage representing the amount of the conversion. A value of 100% is completely sepia, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The initial value for interpolation is 0.

.element {
  filter: sepia(50%);
}

This code will convert the image to 50% sepia, which will give it a slight brown tint.

Here are some code examples demonstrating how to use the sepia() filter:

/* Convert an image to 100% sepia */
.sepia {
  filter: sepia(100%);
}

<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="sepia"/>
</div>

Sepia

Real-world use Cases for the Sepia Filter

The sepia() filter can be used to create a variety of effects, such as:

  • Giving images a vintage or antique look

  • Creating a more subdued atmosphere for a website or design

  • Emphasizing certain elements in an image

  • Creating a sense of nostalgia or longing

Here are some examples of how the sepia() filter can be used in real-world applications:

  • A website for a vintage clothing store might use the sepia() filter on all of its product images to give them a nostalgic look.

  • A blog post about old photos might use the sepia() filter on all of the photos to create a more subdued and atmospheric mood.

  • A photographer might use the sepia() filter to emphasize certain elements in their images, such as a person’s eyes or a particular object in the background.

  • A filmmaker might use the sepia() filter to create a sense of nostalgia or longing in their film.

Detailed Explanation of Drop-Shadow

The CSS drop-shadow() filter function applies a drop-shadow effect to an element. It takes four parameters:

  • Horizontal offset: The horizontal distance of the shadow from the element.

  • Vertical offset: The vertical distance of the shadow from the element.

  • Blur: The amount of blur applied to the shadow.

  • Color: The color of the shadow.

The drop-shadow filter works by creating a blurred, offset version of the element’s alpha mask and drawing it below the element in the specified color. The alpha mask of an element is a grayscale image that represents the element’s transparency, with black representing opaque pixels and white representing transparent pixels.

The drop-shadow filter can be used to create a variety of effects, such as giving elements a sense of depth or making them stand out from the background. It can also be used to create more subtle effects, such as softening the edges of an element or adding a slight glow.

.element {
  filter: drop-shadow(10px 10px 5px black);
}

This code will apply a drop shadow to the .my-element element with a horizontal offset of 10px, a vertical offset of 10px, a blur of 5px, and a color of black.

The following code examples demonstrate how to use the drop-shadow filter to create different effects:

/* A simple drop shadow */
.drop-shadow {
  filter: drop-shadow(10px 10px 5px black);
}
<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="drop-shadow"/>
</div>
Drop-shadow

You can experiment with the different parameters of the drop-shadow() filter to create different effects. You can also combine the drop-shadow() filter with other CSS filters to create even more interesting effects.

Tips for Using the Drop-Shadow Filter

Here are a few tips for using the drop-shadow filter effectively:

  • Use a subtle drop shadow to give elements a sense of depth without making them look too busy.

  • Use a drop shadow with a contrasting color to make elements stand out from the background.

  • Use a drop shadow to soften the edges of elements or add a slight glow.

  • Be careful not to overuse the drop-shadow filter, as this can make your design look cluttered.

Checkout this YouTube video on Advanced use of CSS filter functions

Detailed Explanation of URL

The CSS filter url() allows you to apply SVG filters to elements. This can be a useful way to create complex visual effects, such as drop shadows, glows, and bevels.

When a browser encounters the url() filter, it first loads the SVG filter that is specified by the #filter-id value. Once the SVG filter has been loaded, the browser applies it to the element that the filter is applied to.

The following code example shows how to use the url() filter to apply a blur effect to an SVG:

<svg width="230" height="120" xmlns="<http://www.w3.org/2000/svg>">
  <filter id="blurMe">
    <feGaussianBlur stdDeviation="4" />
  </filter>
  <rect x="0" y="10" rx="20" ry="20" width="100" height="100" fill="green" />
  <rect x="120" y="10" rx="20" ry="20" width="100" height="100" fill="green" filter="url(#blurMe)" />
</svg>

SVG url filter

Other Usage Notes

Using Multiple CSS Filters

You can use multiple CSS filters on an element by chaining them together in the filter property. The order in which you chain the filters will affect the way they are applied. For example, if you first apply a blur filter and then a brightness filter, the blur filter will be applied to the original image, and then the brightness filter will be applied to the blurred image.

To chain multiple CSS filters together, simply separate the filter names with a space. For example, the following CSS code will apply a blur filter and then a brightness filter to an image:

.element {
  filter: blur(5px) brightness(150%);
}

.multiple {
  filter: contrast(175%) saturate(150%) blur(3px);
}
<div>
  <img src="img-lights.jpg"/>
  <img src="img-lights.jpg" class="multiple"/>
</div>
multiple filters

Usage with the Initial and Inherit Keywords

The initial and inherit keywords can be used in the filter property to specify the initial or inherited value of the property, respectively.

The initial keyword specifies the initial value of the filter property, which is none. This means that no filters will be applied to the element:

.element {
  filter: initial; /* The initial keyword sets filter to its default value, which is none */
}

The inherit keyword specifies that the filter property should inherit its value from its parent element:

.element {
  filter: inherit; /* The inherit keyword makes the filter take on the computed value from its parent element */
}

What You Have Learned

In this article, you learned about CSS filters, which are a powerful tool for modifying the appearance of elements on a web page. CSS filters can be used to apply a variety of effects, such as blurring, brightening, contrasting, and grayscale images and text.

You learned how to apply CSS filters to elements using the filter property, and how to use functions to create more customized effects. You also learned about each of the 11 built-in CSS filters in detail, including their syntax and how they work.

In addition to the built-in filters, you learned how to combine multiple filters to create more complex effects. You also learned about the initial and inherit keywords, which can be used to reset the filter property to its default value or inherit the filter value from a parent element.

Your Next Steps

Now that you have a solid understanding of CSS filters, it’s time to put this knowledge into practice by creating visually appealing web designs. However, designing and coding beautiful UI components from scratch can be time-consuming.

That’s where Purecode.ai comes in. Purecode.ai is an incredible resource that provides a library of over 10,000 ready-made, AI-generated UI components for CSS, Tailwind CSS, and Material UI.

With Purecode.ai, you can instantly integrate beautiful, customizable component blocks into your projects. The AI-generated components are clean, modern, and optimized – saving you tons of time and design work.

So skip the grunt work of coding repetitive UI elements. With the techniques you’ve learned here, combined with the pre-made components on Purecode.ai, you’ll be able to rapidly create stunning, interactive web interfaces with ease.

Check out Purecode.ai today to supercharge your workflow and take your web designs to the next level with AI-generated components!

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.