CSS Filter Functions — Complete Guide
The CSS filter property accepts 10 filter functions that can be combined to create complex visual effects. Each function takes a single value and modifies a specific aspect of the element's rendering. Here is a complete reference for every function.
CSS Filter Generator
Build CSS filter effects visually — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow. Preview in real time and copy production-ready CSS.
Presets
Filters
Drop Shadow
Preview
CSS Output
filter: none;
Ctrl+Enter to copy
Filter Reference
| Function | Range | Default |
|---|---|---|
| blur() | 0–20px | 0px |
| brightness() | 0–300% | 100% |
| contrast() | 0–300% | 100% |
| grayscale() | 0–100% | 0% |
| hue-rotate() | 0–360deg | 0deg |
| invert() | 0–100% | 0% |
| opacity() | 0–100% | 100% |
| saturate() | 0–300% | 100% |
| sepia() | 0–100% | 0% |
| drop-shadow() | x y blur color | — |
Color adjustment filters
brightness(%) scales the luminance of the element — 100% is unchanged, 0% is completely black, and values above 100% increase brightness. contrast(%) adjusts the difference between light and dark areas — 100% is normal, 0% produces a flat gray, and higher values create sharper contrast. saturate(%) controls color intensity — 0% is fully desaturated (gray), 100% is normal, and 200%+ produces vivid, oversaturated colors.
/* CSS filter functions — complete reference */
.blur { filter: blur(4px); } /* Gaussian blur */
.brightness { filter: brightness(1.5); } /* 0=black, 1=normal, 2=2x bright */
.contrast { filter: contrast(1.5); } /* 0=gray, 1=normal */
.grayscale { filter: grayscale(100%); } /* 0%=color, 100%=B&W */
.hue-rotate { filter: hue-rotate(90deg); } /* rotate color wheel */
.invert { filter: invert(100%); } /* negative image */
.opacity { filter: opacity(50%); } /* transparency */
.saturate { filter: saturate(200%); } /* color intensity */
.sepia { filter: sepia(100%); } /* warm vintage tone */
/* Combine multiple filters */
.vintage {
filter: sepia(60%) contrast(1.1) brightness(0.9) saturate(0.8);
}
/* Drop shadow (follows element shape, not box) */
.icon { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }Color transformation filters
grayscale(%) converts colors to grayscale — 0% is unchanged, 100% is fully gray. sepia(%) applies a warm brownish tone simulating aged photographs — 0% is unchanged, 100% is full sepia. invert(%) flips the colors — 0% is unchanged, 100% is complete inversion (negative image). hue-rotate(deg) rotates all colors around the color wheel — 0deg is unchanged, 180deg shifts to complementary colors, 360deg wraps back to the original.
Blur, opacity, and drop-shadow
blur(px) applies a Gaussian blur — 0 is sharp, larger values produce increasingly blurry results. Unlike box-shadow which only blurs a shadow copy, filter blur blurs the entire element. opacity(%) controls transparency — 100% is fully visible, 0% is fully transparent. This is similar to the opacity property but can be combined with other filters. drop-shadow(x y blur color) adds a shadow that follows the element's alpha channel, respecting transparent areas in PNGs and SVGs.
Frequently Asked Questions
How many CSS filter functions can I combine?
There is no hard limit — you can chain as many filter functions as needed in a single declaration. They are applied left to right, so order matters. For example, applying grayscale before hue-rotate produces a different result than hue-rotate before grayscale. In practice, 2-4 filters cover most visual effects.
What is the default value for CSS filter?
The default value is filter: none, meaning no filters are applied. Each individual function also has a default: brightness(100%), contrast(100%), saturate(100%), opacity(100%), blur(0px), grayscale(0%), sepia(0%), invert(0%), hue-rotate(0deg). Only include functions that differ from these defaults.
Can I animate CSS filters with transitions?
Yes. The filter property is animatable with CSS transitions and @keyframes. Add transition: filter 0.3s ease for smooth hover effects. The browser interpolates each numeric value independently. For best performance, add will-change: filter to promote the element to its own GPU compositing layer.
Related Generate Tools
Security Headers Generator
Generate HTTP security headers for Nginx, Apache, Vercel, Netlify, and Cloudflare with presets, security scoring, and multi-format output
JSON to GraphQL Schema
Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download
HTTP Request Builder
Build HTTP requests visually and generate code in cURL, JavaScript, Python, Go, Rust, and PHP — lightweight Postman/ReqBin alternative
HTML Table Generator
Build HTML tables visually with an interactive editor — add rows, columns, header rows, captions, and styling. Export as plain HTML, inline CSS, or Tailwind classes