How to Use CSS Filters for Image Effects

CSS filters let you apply visual effects to images and UI elements without editing the original file.

With one CSS property, you can blur an image, make it brighter, increase contrast, convert it to grayscale, add saturation, create a sepia effect or apply a drop shadow.

For example:

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

This turns the image black and white in the browser. The original image file does not change.

In this guide, you will learn how CSS filters work, the most useful filter functions, common image effect examples and how to generate CSS filter styles online with the free CSS Filter Generator by Free Utilities Online.

What Are CSS Filters?

CSS filters are visual effects applied to an element before it is displayed on the page.

They are commonly used on:

• images;

• backgrounds;

• icons;

• cards;

• buttons;

• overlays;

• thumbnails;

• hero sections;

• hover effects;

• UI states.

A basic CSS filter looks like this:

img {
  filter: brightness(120%);
}

This makes the image brighter.

You can also combine multiple filters:

img {
  filter: brightness(110%) contrast(115%) saturate(120%);
}

This adjusts brightness, contrast and saturation at the same time.

Basic CSS Filter Syntax

The syntax is simple:

filter: function(value);

Example:

.photo {
  filter: blur(4px);
}

For multiple filters, write them in a sequence:

.photo {
  filter: brightness(110%) contrast(120%) saturate(130%);
}

The order can matter because each filter is applied after the previous one.

Common CSS Filter Functions

CSS includes several useful filter functions.

Common examples:

filter: blur(4px);
filter: brightness(120%);
filter: contrast(130%);
filter: grayscale(100%);
filter: sepia(80%);
filter: saturate(150%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(60%);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));

Each one creates a different type of visual effect.

blur()

The blur() filter makes an element appear blurred.

.image {
  filter: blur(4px);
}

The higher the value, the stronger the blur.

Examples:

filter: blur(2px);
filter: blur(8px);
filter: blur(16px);

Use blur for:

• background images;

• overlays;

• hover effects;

• disabled states;

• decorative depth;

• privacy previews;

• frosted visual effects.

Avoid using too much blur on important content because it can make images or text hard to understand.

brightness()

The brightness() filter makes an element brighter or darker.

.image {
  filter: brightness(120%);
}

Values above 100% make the image brighter. Values below 100% make it darker.

Examples:

filter: brightness(80%);
filter: brightness(100%);
filter: brightness(130%);

Use brightness when:

• an image is too dark;

• you need a hover effect;

• you want to darken an image behind text;

• you want a disabled or inactive visual state.

For example, darkening a hero image can make white text easier to read:

.hero-image {
  filter: brightness(65%);
}

contrast()

The contrast() filter changes the difference between dark and light areas.

.image {
  filter: contrast(120%);
}

Values above 100% increase contrast. Values below 100% reduce contrast.

Examples:

filter: contrast(80%);
filter: contrast(120%);
filter: contrast(160%);

Use contrast when:

• an image looks flat;

• you want a stronger visual style;

• you need a dramatic image effect;

• you want hover states on thumbnails.

Be careful with very high contrast because details can be lost.

grayscale()

The grayscale() filter removes color.

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

Examples:

filter: grayscale(0%);
filter: grayscale(50%);
filter: grayscale(100%);

Use grayscale for:

• inactive states;

• portfolio hover effects;

• brand-neutral image grids;

• before/after interactions;

• editorial image styles.

A common hover effect:

.card img {
  filter: grayscale(100%);
  transition: filter 200ms ease;
}

.card:hover img {
  filter: grayscale(0%);
}

This makes images turn from black and white to full color on hover.

saturate()

The saturate() filter controls color intensity.

.image {
  filter: saturate(140%);
}

Values above 100% increase saturation. Values below 100% reduce saturation.

Examples:

filter: saturate(60%);
filter: saturate(100%);
filter: saturate(160%);

Use saturation when:

• an image feels dull;

• you want a more vivid style;

• you need a muted image effect;

• you want consistent image treatment.

Avoid over-saturating photos because skin tones and brand colors can look unnatural.

sepia()

The sepia() filter creates a warm brown-toned effect.

.image {
  filter: sepia(80%);
}

Examples:

filter: sepia(30%);
filter: sepia(70%);
filter: sepia(100%);

Use sepia for:

• vintage effects;

• editorial styles;

• warm image treatments;

• nostalgic visual designs.

Sepia is very noticeable, so use it intentionally.

hue-rotate()

The hue-rotate() filter shifts colors around the color wheel.

.image {
  filter: hue-rotate(90deg);
}

Examples:

filter: hue-rotate(30deg);
filter: hue-rotate(120deg);
filter: hue-rotate(240deg);

Use hue rotation for:

• creative effects;

• hover states;

• color experiments;

• decorative images;

• playful UI moments.

It can quickly make images look unnatural, so it is best for stylized effects rather than realistic photos.

invert()

The invert() filter reverses colors.

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

This is sometimes useful for icons.

Examples:

filter: invert(0%);
filter: invert(50%);
filter: invert(100%);

Use invert carefully. On photos, it creates a very strong effect. On simple icons, it can be useful for switching between light and dark appearances.

opacity()

The opacity() filter makes an element more transparent.

.image {
  filter: opacity(60%);
}

This is similar to using the opacity property, but inside a filter chain.

Example:

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

This can be useful for inactive image states.

drop-shadow()

The drop-shadow() filter adds a shadow based on the visible shape of the element.

.logo {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

This is different from box-shadow.

box-shadow follows the rectangular box of the element.
drop-shadow() follows the visible shape or alpha channel of the image.

For example, if you have a transparent PNG logo, drop-shadow() can create a shadow that follows the logo shape:

.logo {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

Use drop-shadow for:

• transparent PNGs;

• logos;

• icons;

• stickers;

• product cutouts;

• non-rectangular images.

Combining CSS Filters

You can combine several filters to create custom effects.

Example:

.image {
  filter: brightness(105%) contrast(115%) saturate(120%);
}

This creates a cleaner, more vivid image.

A muted editorial effect:

.image-muted {
  filter: grayscale(30%) contrast(90%) brightness(95%);
}

A vintage effect:

.image-vintage {
  filter: sepia(60%) contrast(110%) brightness(95%);
}

A dramatic hover effect:

.card img {
  filter: grayscale(100%) contrast(90%);
  transition: filter 220ms ease;
}

.card:hover img {
  filter: grayscale(0%) contrast(110%) saturate(115%);
}

Small adjustments usually look better than extreme effects.

CSS Filters for Hover Effects

CSS filters are great for hover effects.

Example:

.card img {
  filter: brightness(90%);
  transition: filter 200ms ease;
}

.card:hover img {
  filter: brightness(110%);
}

This makes the image brighten on hover.

Another example:

.gallery img {
  filter: grayscale(100%);
  transition: filter 250ms ease;
}

.gallery img:hover {
  filter: grayscale(0%);
}

This creates an interactive black-and-white to color effect.

For a softer hover effect:

.thumbnail {
  filter: saturate(85%) brightness(95%);
  transition: filter 200ms ease;
}

.thumbnail:hover {
  filter: saturate(115%) brightness(105%);
}

CSS Filters for Hero Images

Hero images often need text over them. CSS filters can help make the text readable.

Example:

.hero-image {
  filter: brightness(60%);
}

This darkens the image so white text is easier to read.

However, in many cases an overlay is more flexible:

.hero {
  background:
    linear-gradient(rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.72)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
}

Use filters when you want to adjust the image itself. Use overlays when you want more control over text readability.

CSS Filters for Disabled States

Filters can help communicate that something is inactive.

Example:

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

This can work for:

• disabled cards;

• unavailable products;

• inactive avatars;

• locked features;

• muted thumbnails.

Do not rely only on filters to communicate important states. Text labels, icons or status messages may also be needed.

CSS Filters for Icons

Filters can be useful for simple icons, especially when working with monochrome assets.

Example:

.icon-light {
  filter: invert(100%);
}

This can turn a dark icon light.

For more complex icon color systems, inline SVG or CSS variables may be a better option. But for quick icon adjustments, filters can be useful.

CSS Filters vs Editing the Image File

CSS filters do not permanently change the image file.

They change how the image appears in the browser.

This is useful when:

• you want hover effects;

• you need different styles for the same image;

• you want to test image treatments quickly;

• you do not want to export multiple image versions;

• you need dynamic UI states.

However, if you need a final edited image for download, sharing or upload, you may still need an image editor or image processing tool.

CSS filters are best for web presentation effects.

CSS filter vs backdrop-filter

filter and backdrop-filter are related, but they affect different things.

filter affects the element itself:

.card img {
  filter: blur(4px);
}

backdrop-filter affects what appears behind the element:

.glass-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
}

Use filter for images and elements.
Use backdrop-filter for glassmorphism and frosted backgrounds.

Common CSS Filter Mistakes

1. Overusing Strong Effects

Extreme filters can make images look cheap or hard to understand.

Avoid stacking too many strong effects unless you are intentionally creating a stylized look.

2. Making Text Hard to Read

If you apply filters to a parent container, child text may also be affected.

For example:

.card {
  filter: blur(4px);
}

This blurs everything inside the card, including text.

If you only want to affect the image, apply the filter to the image element.

3. Using Filters Instead of Proper Image Optimization

CSS filters do not reduce file size.

If an image is too large, use an image compressor or image resizer. Filters change appearance, not file weight.

4. Relying on Filters for Accessibility States

A disabled or inactive state should not rely only on visual effects.

Use labels, ARIA states or clear UI messaging when needed.

5. Forgetting Performance

Filters can be visually useful, but heavy blur effects on large elements can be expensive.

Use strong blur carefully, especially on large backgrounds or animated elements.

Practical CSS Filter Recipes

Black and White Image

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

Best for editorial layouts and hover effects.

Soft Hover Brightness

.image-hover {
  filter: brightness(95%);
  transition: filter 200ms ease;
}

.image-hover:hover {
  filter: brightness(110%);
}

Best for cards, galleries and thumbnails.

Vivid Image Treatment

.image-vivid {
  filter: contrast(112%) saturate(125%);
}

Best for hero images and product visuals.

Muted Image Treatment

.image-muted {
  filter: grayscale(25%) saturate(75%) brightness(95%);
}

Best for subtle editorial styles.

Vintage Effect

.image-vintage {
  filter: sepia(60%) contrast(105%) brightness(95%);
}

Best for warm, nostalgic image styles.

Transparent Logo Shadow

.logo {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
}

Best for PNG logos, stickers and non-rectangular images.

Generate CSS Filters Online

You can write CSS filters manually, but previewing the effect visually is much faster.

With the free CSS Filter Generator by Free Utilities Online, you can:

• adjust blur;

• change brightness;

• control contrast;

• add grayscale;

• test saturation;

• apply sepia;

• preview filter combinations;

• copy ready-to-use CSS.

This is useful for images, thumbnails, hover effects, hero sections, UI cards and creative web design effects.

Related Free Tools

You may also find these tools useful:

• CSS Filter Generator

• CSS Box Shadow Generator

• CSS Button Generator

• CSS Gradient Generator

• Image Converter

• Image Compressor

• Image Resizer

Together, these tools help you style images, optimize files and create better visual effects for web design.

FAQ

What does the CSS filter property do?

The CSS filter property applies graphical effects to an element, such as blur, brightness, contrast, grayscale, saturation, sepia, opacity, invert and drop shadow.

Can I apply CSS filters to images?

Yes. CSS filters are commonly used on images to create hover effects, grayscale styles, brightness changes and creative visual treatments.

Does CSS filter change the original image file?

No. CSS filters only change how the image is displayed in the browser. The original image file remains unchanged.

What is the difference between box-shadow and drop-shadow?

box-shadow creates a shadow around the rectangular box of an element. drop-shadow() follows the visible shape or alpha channel of the image, which is useful for transparent PNGs and icons.

Are CSS filters good for performance?

CSS filters are useful, but heavy blur effects on large elements can be expensive. Use strong filters carefully, especially on large backgrounds or animated elements.

Final Tip

CSS filters are a fast way to create image effects without editing the original file.

Start with subtle values, preview the result and avoid making important content harder to read.

Try the CSS Filter Generator to create image effects visually and copy clean CSS for your next design.