CSS Image Effects with Filters
CSS filters are the fastest way to add visual effects to images without touching an image editor. From simple grayscale hover effects to vintage film looks, everything is done with a single CSS property and no JavaScript.
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 | — |
Grayscale on hover
The most common image filter effect: set filter: grayscale(100%) on the image by default, then grayscale(0%) on :hover with a transition. This creates a reveal effect where images start desaturated and gain color on hover. Add transition: filter 0.3s ease for a smooth animation. This works great for team photo grids and portfolio galleries.
/* CSS image effects using filters */
/* Black & white photo */
.bw { filter: grayscale(100%) contrast(1.1); }
/* Vintage / retro look */
.vintage { filter: sepia(40%) saturate(0.8) contrast(1.1) brightness(0.95); }
/* Dreamy / soft focus */
.dreamy { filter: blur(1px) brightness(1.1) saturate(1.3); }
/* High contrast dramatic */
.dramatic { filter: contrast(1.4) brightness(0.9) saturate(1.2); }
/* Night vision effect */
.nightvision { filter: hue-rotate(90deg) saturate(3) brightness(1.2); }
/* Duotone effect */
.duotone {
filter: grayscale(100%) contrast(1.2) brightness(0.8);
mix-blend-mode: multiply;
}
/* Hover transition */
img { filter: grayscale(100%); transition: filter 0.3s; }
img:hover { filter: grayscale(0%); }Vintage and film effects
Combine sepia, contrast, and brightness to simulate old photographs: filter: sepia(40%) contrast(110%) brightness(95%) creates a warm vintage look. For a faded film style, use contrast(80%) brightness(110%) saturate(70%) sepia(15%). Adjust hue-rotate to shift the color temperature — positive values warm it up, values around 180deg create cool-toned effects.
Duotone and color tinting
Create a duotone effect by combining grayscale(100%) sepia(100%) saturate(200%) hue-rotate(Xdeg). First, grayscale removes the original colors. Then sepia adds a base warm tone. Saturate intensifies it, and hue-rotate shifts it to any color on the color wheel. Changing hue-rotate gives you pink (300deg), blue (180deg), green (90deg), or any other duotone palette.
Frequently Asked Questions
How do I make an image grayscale with CSS?
Add filter: grayscale(100%) to the image element. Use grayscale(50%) for partial desaturation. To add a hover effect that reveals color, combine it with transition: filter 0.3s ease and set filter: grayscale(0%) on :hover.
Can I apply CSS filters to background images?
The filter property applies to the entire element including its background, borders, and children. If you want to filter only the background image, use a pseudo-element (::before) with the background and filter, or use backdrop-filter on an overlay element.
Do CSS filters work on all image formats?
Yes. CSS filters work on JPG, PNG, WebP, AVIF, GIF, and SVG images rendered via <img> tags, CSS background-image, <picture>, or inline SVG. They also work on <video> and <canvas> elements. The drop-shadow filter is especially useful for PNGs and SVGs because it respects the alpha channel.
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