CSS Tools · runs in your browser

CSS Filter Generator

Stack blur, brightness, contrast, hue and more into one filter rule.

No sign-up No file limit Nothing uploaded

CSS Filter Generator

How to use 3 steps
  1. Add a Preview image if you want to test on your own picture.
  2. Adjust the filters: Blur, Brightness, Contrast, Saturation and the rest. Reset starts over.
  3. Press Copy CSS and paste it into your stylesheet.
Nothing is uploaded. Without a file the built-in swatch is used.
Generated CSS






	Only the values you have moved away from their defaults are written out, because filter replaces the whole list rather than merging, and a rule full of no-op functions still costs a compositing pass. Order matters: the functions run left to right, so blurring before a contrast boost gives a different result from the reverse. drop-shadow follows the alpha channel, which is what separates it from box-shadow on a cut-out PNG.


			


			
			
					

			
How this tool works


							
Ten filter functions are combined into a single value, applied in the order they are listed. That order matters more than it first appears: a filter operates on the result of the one before it, so saturating after a greyscale conversion has nothing left to saturate, while saturating first and converting afterwards produces a different image entirely.

			
							
Each function has a neutral value at which it does nothing, and any function sitting at its neutral setting is left out of the output rather than written as a no-op. That is a performance decision rather than tidiness: a filter list, even one that changes nothing visible, promotes the element onto its own compositing layer, which costs memory. Load your own image into the preview to judge a filter against real content rather than a flat colour.

			
												
Order, cost and what filters affect

								
    
																	
  • 
															The whole element is filtered, children included:
														text, borders and backgrounds all pass through it. Blurring a card blurs the words on it. To filter only an image, put the filter on the image.						
    • 
																	
  • 
															Blur is the expensive one:
														its cost grows with the radius and it is recalculated whenever the element repaints. A large blur animated on scroll is the usual cause of a page that stutters.						
    • 
																	
  • 
															Percentages above one hundred are allowed and often wanted:
														brightness, contrast and saturate all take values past their neutral point to push beyond the original rather than only toward grey.						
    • 
																	
  • 
															drop-shadow follows the alpha channel, box-shadow does not:
														on a transparent PNG or an SVG, drop-shadow traces the actual shape while a box-shadow traces the rectangle around it.						
    • 
									

					

		
			
Order changes the result



Filters are applied left to right, and each one operates on the output of the one before it. That makes the list order a real setting rather than a formality.



Saturating after a greyscale conversion has nothing left to saturate — the colour is already gone. Saturating first and converting afterwards produces a different image entirely, because the greyscale step is now averaging different channel values. The same applies to brightness before or after contrast: one lifts the whole image and then stretches it, the other stretches and then lifts.



The [msm_tool slug="css-filter-generator"] combines up to ten functions into one value, and reordering them is the fastest way to get a result you cannot reach by adjusting the numbers.



The whole element is filtered



Text, borders, backgrounds and children all pass through it. Blurring a card blurs the words on it; desaturating a panel desaturates its buttons.



To filter only an image, put the filter on the image element rather than on its container. That sounds obvious and it is the single most common surprise with the property, because containers are where people naturally put styles.



Neutral values are omitted, and that is deliberate



Every function has a value at which it does nothing: brightness(100%), blur(0), grayscale(0). Anything sitting at its neutral setting is left out of the generated value rather than written as a no-op.



That is a performance decision, not tidiness. A filter list — even one that changes nothing visible — promotes the element onto its own compositing layer, which costs memory. filter: none and filter: brightness(100%) look identical and are not.



Blur is the expensive one



Its cost grows with the radius and it is recalculated whenever the element repaints. The colour functions — brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert — are comparatively cheap and can be used freely.



The pattern to avoid is a large blur animated on scroll, which is a common hero-image treatment and a reliable way to make a page stutter on mid-range hardware. If you need blur to change, animate the opacity of a pre-blurred layer instead.



Percentages past 100 are allowed and often wanted



Brightness, contrast and saturate all accept values above their neutral point. saturate(150%) pushes colour beyond the original rather than only toward grey, and contrast(120%) is frequently what an image needs rather than a reduction.



Going the other way, brightness(0) is black and contrast(0) is flat grey. Both are more useful as the end point of a transition than as a static state.



drop-shadow follows the shape



This is the one function with no equivalent elsewhere. filter: drop-shadow() traces the alpha channel, so on a transparent PNG or an SVG it follows the actual silhouette. box-shadow always traces the element's rectangle.



For a logo with a transparent background, a cut-out product photograph or an icon, drop-shadow is the only one that looks right. It is more expensive than box-shadow, so use it where the shape matters and box-shadow where it does not.



backdrop-filter is a different property



Worth naming to avoid the confusion: filter affects the element and its contents; backdrop-filter affects what is behind it. They take the same functions and do opposite things.



Practical uses



    
	
  1. Greyscale on hover — a logo grid that desaturates until hovered. Cheap, and it reads as deliberate.
    2. 
	
  2. Dimming a background image — brightness(0.6) under white text, which is more reliable than a semi-transparent overlay because it does not shift the colour.
    3. 
	
  3. Normalising mismatched photographs — a small saturate and contrast adjustment applied to a whole gallery pulls inconsistent source images closer together.
    4. 
	
  4. Recolouring an icon — hue-rotate on a single-colour SVG, though a CSS custom property on the fill is cleaner where you control the markup.
    5. 




What it cannot fix



Brightening a dark photograph raises the noise along with the shadows. Sharpening is not available at all — there is no sharpen function — and increasing contrast is not the same thing. A filter adjusts what is in the image; it does not add information that was never captured.

			
			
					

			

				

					Frequently Asked Questions				

				

					Specific to the CSS Filter Generator. Broader questions about this category are answered on the category page.				

			


					

											

					
					

						
A filter applies to the element and everything inside it. Move the filter onto the image itself to leave the surrounding text sharp.

					

				

											

					
					

						
Yes, considerably. Each one operates on the output of the previous, so greyscale followed by saturate gives a different result from the reverse.

					

				

											

					
					

						
Anything left at its neutral setting is omitted. A filter list that changes nothing still forces the element onto its own compositing layer, which costs memory for no gain.

					

				

											

					
					

						
drop-shadow follows the alpha channel and traces the actual shape. box-shadow always traces the element's rectangle.

					

				

											

					
					

						
Blur is, at a large radius or when animated. The colour functions are cheap. The cost is per repaint, so a static filter on a static element is fine.

					

				

					

				

		
			


			

		

	









	

		

			

				
									
Subscribe to receive notifications about new tools, features, and productivity tips.