CSS Filter Generator

CSS Filters and Blend Modes: Complete Guide

CSS Filters and Blend Modes are powerful visual effects that allow developers to manipulate the appearance of images, backgrounds, and HTML elements without editing the original graphics. They are widely used in modern web design to create attractive user interfaces, interactive effects, image enhancements, and creative visual compositions.

Using CSS filters, you can blur images, adjust brightness and contrast, change colors, apply grayscale or sepia effects, control opacity, and even create shadows. Blend modes allow one element to blend with the colors of another, producing effects similar to those found in professional image editing software like Adobe Photoshop.

What are CSS Filters?

CSS Filters are visual effects applied directly to HTML elements using the filter property. They modify the rendering of an element while leaving the original image or content unchanged.

Syntax

filter: filter-function(value);

You can apply multiple filters together.

filter: brightness(120%) contrast(150%) saturate(180%);

Filters are processed from left to right, so the order of filters can affect the final result.

Supported CSS Filter Functions

blur()

The blur() function softens an image by reducing the sharpness of its pixels.

Syntax

filter: blur(5px);

Uses

• Background blur
• Glassmorphism
• Loading placeholders
• Privacy masking

brightness()

The brightness() filter controls how light or dark an element appears.

Syntax

filter: brightness(150%);

Values

• 100% = Original
• Greater than 100% = Brighter
• Less than 100% = Darker

contrast()

The contrast() function adjusts the difference between light and dark colors.

filter: contrast(180%);

Higher values produce more vivid images, while lower values create a flatter appearance.

grayscale()

Converts an image into black and white.

filter: grayscale(100%);

Useful for portfolios, hover effects, galleries, and disabled image states.

hue-rotate()

Rotates the colors around the color wheel.

filter: hue-rotate(120deg);

This creates dramatic color variations without modifying the original image.

invert()

Inverts all colors.

filter: invert(100%);

Commonly used for:

• Dark mode icons
• Image inversion
• Special visual effects

opacity()

Controls element transparency.

filter: opacity(50%);

Unlike the CSS opacity property, it can be combined with other filters.

saturate()

Controls color intensity.

filter: saturate(180%);

Higher saturation produces vibrant colors, while lower saturation results in muted tones.

sepia()

Applies a warm brown vintage effect.

filter: sepia(100%);

Frequently used to create antique or nostalgic photographs.

drop-shadow()

Creates realistic shadows that follow the actual shape of an image, including transparent areas.

filter: drop-shadow(10px 10px 20px rgba(0,0,0,.4));

Unlike box-shadow, it respects transparent pixels.

url()

The url() filter references an SVG filter.

filter: url(#myFilter);

SVG filters can perform advanced effects like displacement maps, turbulence, lighting effects, and custom color transformations.

Combining Multiple Filters

Multiple filters can be combined into one declaration.

filter:
brightness(110%)
contrast(140%)
saturate(150%)
drop-shadow(10px 10px 20px rgba(0,0,0,.3));

The browser processes each filter sequentially.

Browser Support

All major browsers support CSS Filters.

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera

Older versions of Internet Explorer do not support CSS Filters.

What are CSS Blend Modes?

Blend Modes determine how one element’s colors combine with the colors beneath it.

The property used is:

mix-blend-mode

It works similarly to layer blending modes in Photoshop.

CSS Blend Mode Values

normal

Default mode. No blending occurs.

mix-blend-mode: normal;

multiply

Darkens colors by multiplying them together.

Useful for shadows and overlays.

screen

Brightens colors and produces the opposite effect of Multiply.

Commonly used for glowing effects.

overlay

Combines Multiply and Screen.

Produces strong contrast while preserving highlights.

darken

Keeps only the darker colors.

lighten

Keeps only the lighter colors.

color-dodge

Brightens the base colors dramatically.

Creates glowing highlights.

color-burn

Darkens the base colors significantly.

Useful for dramatic effects.

hard-light

Produces intense lighting based on the top layer.

soft-light

Creates gentle lighting effects.

Popular in modern UI design.

difference

Displays the difference between colors.

Creates interesting inverted effects.

exclusion

Similar to Difference but with lower contrast.

hue

Uses the hue of the top element while preserving the brightness of the bottom element.

saturation

Uses only the saturation values of the top element.

color

Uses both hue and saturation from the top layer while keeping luminosity from the bottom.

luminosity

Uses brightness from the top element while preserving color information below.

plus-darker

Creates darker blended results.

plus-lighter

Creates brighter blended results.

Filter vs Blend Mode