CSS Filter Effects Generator

The filter property lets you adjust how an element is drawn before it reaches the screen. Unlike editing the source image file, filters are non-destructive: you change the painted result in the browser and can reset or combine effects in CSS.

Filters are popular for hero photos, thumbnails, icons, and cards because a single declaration can dim, sharpen, recolor, or soften content without extra markup. They also apply to HTML elements that are not images, so text and backgrounds inside a filtered container inherit the same treatment.

• Stacks multiple functions in one declaration, separated by spaces.
• Works on replaced content (images, video) and regular boxes.
• Pairs well with transition for hover and focus states.
• Related: backdrop-filter blurs or tints content behind an element instead of the element itself.

See the syntax overview for the value grammar, or open the functions reference for what each slider in the generator controls.

Load a sample or custom image in the live preview, tune blur, brightness, contrast, color shifts, and other supported filter functions with sliders, and copy the combined declaration when the preview matches your design.

Image URL

×

<img src="/images/demo/green-leaves.png" class="filter-effect" width="200px" height="200px" alt="">

.filter-effect {
	filter: blur(1.7px);
}

The generator section on this page mirrors the classic HTML Code Generator workflow: you pick a preview image, move sliders for each filter function, and read the combined result in the output field.

1. Enter an image URL or keep the default sample so the preview has something to render.
2. Adjust blur, brightness, contrast, grayscale, hue rotation, invert, opacity, saturation, sepia, and drop-shadow controls.
3. Watch the preview update in real time as values change.
4. Copy the generated filter declaration into your stylesheet or component.
5. Reset sliders when you want to start a new look without reloading the page.

Order matters when several functions are active: the browser applies them left to right in the declaration. For subtle photo edits, start with exposure-style controls (brightness, contrast), then add color adjustments (saturate, sepia, hue-rotate), and finish with blur or drop-shadow if needed.

Explore different CSS filter effects with live previews and ready-to-use code examples. From basic filters like blur, grayscale, and sepia to creative combinations, discover how to transform images using simple CSS properties. Copy the CSS code and use it in your own projects.

None Effect

filter: none;

Blur Effect

filter: blur(3px);

Grayscale Effect

filter: grayscale(1);

Sepia Effect

filter: sepia(0.85);

Brightness Effect

filter: brightness(1.4);

Contrast Effect

filter: contrast(1.6);

Hue Rotate Effect

filter: hue-rotate(130deg);

Invert Effect

filter: invert(1);

Saturate Effect

filter: saturate(2.2);

Opacity Effect

filter: opacity(0.45);

Drop Shadow Effect

filter: drop-shadow(8px 8px 5px #555);

A filter value is either the keyword none or a space-separated list of filter functions. Each function takes its own arguments inside parentheses. The generator on this page focuses on the most common image filters supported across modern browsers.

Supported function names in this tool:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

You can combine any number of these functions in one declaration. Use none to clear filters on a selector. Details for each function appear in the filter functions reference.

Each row matches a control in the generator. Default strengths follow typical browser defaults where applicable; your preview may treat 100% or 0 as the neutral starting point.

For shadow styling on rectangular cards, compare drop-shadow() with box-shadow in the section on drop-shadow vs box-shadow.

Both effects suggest depth, but they paint different geometry. Choose based on whether the shadow should trace a bitmap silhouette or the element border box.

You can use both on different elements in the same layout. For layered card shadows and neumorphism presets, see the CSS box-shadow generator.

Filters solve quick visual problems without exporting new image assets from an editor. The generator helps you find balanced values before you paste them into production CSS.

• Thumbnail hover: Slightly raise brightness or saturation on hover while keeping layout stable.
• Disabled states: Combine grayscale() and lower opacity() to mute inactive icons.
• Hero overlays: Darken photography with reduced brightness so headline text stays readable.
• Brand tint: Use sepia() plus hue-rotate() for cohesive campaign color.
• Soft focus: Apply blur() on background media while foreground content stays sharp on another layer.
• Sticker icons: Add drop-shadow() on PNG icons so they lift off varied backgrounds.

For checkerboard preview backgrounds when testing transparent PNGs, try the checkerboard transparency pattern tool.

The standard filter property is widely available in current evergreen browsers. Legacy WebKit builds once required a -webkit-filter prefix; modern Chrome, Safari, Firefox, and Edge honor the unprefixed property for the functions this tool exposes.

If a filter is only decorative, keep the unfiltered asset visible underneath and treat the effect as progressive enhancement. Avoid stacking many strong filters on huge background images when targeting low-powered phones.

Quick answers about CSS filters, how this generator outputs declarations, and how filters differ from related properties.

These generators and references pair well with image filters when you are building cards, typography, or layout polish.

• CSS box-shadow generator for card shadows, glows, and drop-shadow comparisons.
• CSS text-shadow generator for display type and headline depth.
• Checkerboard transparency pattern for PNG and SVG preview backgrounds.
• CSS border-radius generator for rounded photo frames and avatars.
• CSS tools hub for other generators and references.