CSS-Tools · läuft in Ihrem Browser

CSS-Filter-Generator

Unschärfe, Helligkeit, Kontrast, Farbton und mehr zu einer Filterregel kombinieren.

Keine Anmeldung Kein Dateilimit Nichts wird hochgeladen

CSS-Filter-Generator

So wird es benutzt 3 Schritte
  1. Fügen Sie ein Vorschaubild hinzu, wenn Sie an Ihrem eigenen Bild testen wollen.
  2. Passen Sie die Filter an: Weichzeichnen, Helligkeit, Kontrast, Sättigung und die übrigen. Zurücksetzen beginnt von vorn.
  3. Drücken Sie CSS kopieren und fügen Sie es in Ihr Stylesheet ein.
Nichts wird hochgeladen. Ohne Datei wird die eingebaute Farbpalette verwendet.
Generiertes CSS






	Ausgegeben werden nur die Werte, die Sie von ihrer Voreinstellung wegbewegt haben, denn filter ersetzt die gesamte Liste, statt sie zusammenzuführen, und eine Regel voller wirkungsloser Funktionen kostet dennoch einen Kompositionsdurchgang. Die Reihenfolge zählt: Die Funktionen laufen von links nach rechts, weshalb Weichzeichnen vor einer Kontrastanhebung ein anderes Ergebnis liefert als umgekehrt. drop-shadow folgt dem Alphakanal, und genau das unterscheidet es bei einem freigestellten PNG von box-shadow.


			


			
			
					

			
So funktioniert dieses Werkzeug


							
Zehn Filterfunktionen werden zu einem einzigen Wert zusammengefasst und in der aufgeführten Reihenfolge angewandt. Diese Reihenfolge zählt mehr, als es zunächst scheint: Jeder Filter arbeitet auf dem Ergebnis des vorigen, nach einer Graustufenumwandlung ist also nichts mehr zu sättigen, während zuerst sättigen und danach umwandeln ein völlig anderes Bild ergibt.

			
							
Jede Funktion hat einen neutralen Wert, bei dem sie nichts tut, und jede Funktion, die auf ihrem neutralen Wert steht, wird weggelassen statt als Leerlauf ausgeschrieben. Das ist eine Entscheidung über Leistung, nicht über Ordentlichkeit: Eine Filterliste hebt das Element auch dann auf eine eigene Kompositionsebene, wenn sie sichtbar nichts verändert, und das kostet Speicher. Laden Sie ein eigenes Bild in die Vorschau, um einen Filter an echtem Inhalt statt an einer einfarbigen Fläche zu beurteilen.

			
												
Reihenfolge, Kosten, und worauf Filter wirken

								
    
																	
  • 
															Gefiltert wird das ganze Element samt seiner Kinder:
														Text, Rahmen und Hintergründe laufen alle hindurch. Eine Karte weichzuzeichnen zeichnet auch die Wörter darauf weich. Soll nur ein Bild gefiltert werden, setzen Sie den Filter auf das Bild.						
    • 
																	
  • 
															Blur ist die teure Funktion:
														Ihre Kosten wachsen mit dem Radius, und sie wird bei jedem Neuzeichnen des Elements neu berechnet. Ein großer, beim Scrollen animierter Weichzeichner ist die übliche Ursache für eine ruckelnde Seite.						
    • 
																	
  • 
															Prozentwerte über hundert sind erlaubt und oft erwünscht:
														brightness, contrast und saturate nehmen alle Werte jenseits ihres neutralen Punktes an, um über das Original hinauszugehen statt nur in Richtung Grau.						
    • 
																	
  • 
															drop-shadow folgt dem Alphakanal, box-shadow nicht:
														Auf einem transparenten PNG oder einem SVG zeichnet drop-shadow die tatsächliche Form nach, während box-shadow das Rechteck darum nachzeichnet.						
    • 
									

					

		
			
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.

			
			
					

			

				

					Häufig gestellte Fragen				

				

					Speziell zum CSS-Filter-Generator. Allgemeinere Fragen zu dieser Kategorie werden auf der Kategorieseite beantwortet.				

			


					

											

					
					

						
Ein Filter gilt für das Element und alles darin. Setzen Sie den Filter auf das Bild selbst, damit der umgebende Text scharf bleibt.

					

				

											

					
					

						
Ja, erheblich. Jede arbeitet auf der Ausgabe der vorigen, Graustufen gefolgt von Sättigung ergibt also etwas anderes als die umgekehrte Folge.

					

				

											

					
					

						
Alles, was auf seinem neutralen Wert steht, wird weggelassen. Eine Filterliste, die nichts verändert, hebt das Element dennoch auf eine eigene Kompositionsebene und kostet Speicher ohne Gegenwert.

					

				

											

					
					

						
drop-shadow folgt dem Alphakanal und zeichnet die tatsächliche Form nach. box-shadow zeichnet immer das Rechteck des Elements nach.

					

				

											

					
					

						
Blur ist es, bei großem Radius oder in Animation. Die Farbfunktionen sind billig. Die Kosten fallen je Neuzeichnung an, ein statischer Filter auf einem statischen Element ist also unproblematisch.

					

				

					

				

		
			


			

		

	









	

		

			

				
									
Abonniere Benachrichtigungen zu neuen Tools, Funktionen und Produktivitätstipps.