Ga naar inhoud
TextArray1.87.0
100% lokaal

CSS-filtergenerator

Maak een CSS-filter- of backdrop-filter-declaratie aan met visuele besturingselementen.

Uitvoer
Gerelateerde tools
CSS box-shadow-generatorOntwikkelaarstools
CSS-gradiëntgeneratorOntwikkelaarstools
Glasmorfisme CSS-generatornieuwOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
CSS-filtergenerator
Dit hulpmiddel bouwt een kant-en-klare CSS-filter- (of backdrop-filter-) declaratie van een reeks visuele besturingselementen, zodat u zich niet de syntaxis hoeft te onthouden voor het combineren van onscherpte, helderheid, contrast, grijstinten, tintrotatie, inverteren, dekking, verzadiging, sepia en drop-shadow in één eigenschap. Het is bedoeld voor iedereen die een fotogalerie, een hover-effect, een frosted-glass-paneel of een thematische afbeeldingsbehandeling stijlt zonder de filterfunctielijst met de hand te schrijven.
Elke functie heeft een eigen veld, en de gegenereerde waarde vermeldt alleen de functies die u werkelijk hebt gewijzigd – dus een pagina met alleen een lichte onscherpte blijft kort in plaats van negen niet-operatieve functies op te sommen. Het veld voor functievolgorde bepaalt de volgorde waarin ze worden uitgevoerd, omdat CSS-filters van links naar rechts worden toegepast en het opnieuw ordenen ervan (onscherpte voor of na het aanpassen van contrast) het visuele eindresultaat kan veranderen. Twee voorinstellingen, Vintage en Zwart & wit, stellen in één keer een hele groep waarden voor een gemeenschappelijk uiterlijk in. Schakel "backdrop-filter" in om te filteren wat achter een element zichtbaar is in plaats van het element zelf – de standaardkeuze voor glasmorfisme-panelen – en schakel het uitvoerformat in om een Tailwind-klasse met willekeurige waarde te krijgen in plaats van een gewone CSS-regel.
Numerieke velden worden automatisch beperkt tot zinvolle bereiken, dus een onopzettelijk groot of negatief getal breekt nooit de uitvoer; het veld voor schaduwkleur accepteert elke CSS-kleurwaarde. Het resultaat wordt live bijgewerkt terwijl u een optie aanpast, en het totaal boven de uitvoer telt hoeveel functies werkelijk actief zijn.
Alles wordt lokaal in uw browser uitgevoerd – niets wat u hier invoert wordt geüpload of ergens heen verzonden. Kopieer het resultaat, download het als .txt-bestand, of stuur het naar de invoer van een ander hulpmiddel om ermee door te gaan.
FAQ
Wat is het verschil tussen filter en backdrop-filter?
`filter` wordt toegepast op het element zelf en alles wat erin wordt getekend; `backdrop-filter` wordt toegepast op alles wat achter het element zichtbaar is, wat het frosted-glass-effect over een achtergrond creëert.
Waarom is de volgorde van de filterfuncties belangrijk?
CSS past filterfuncties van links naar rechts toe, waarbij elk op het resultaat van het vorige werkt. Onscherpte toepassen voor contrast aanpassen kan anders eruitzien dan contrast eerst aanpassen, dus het opnieuw ordenen ervan kan het uiteindelijke uiterlijk veranderen, zelfs met dezelfde waarden.
Wat wijzigen de Vintage en Zwart & wit voorinstellingen?
Vintage stelt een warme mix van sepia, verzadiging, contrast, helderheid en een lichte tintverplaatsing in; Zwart & wit stelt grijstinten in op 100% met een kleine contrastverhogung. Elke voorinstelling overschrijft de afzonderlijke schuifregelaars terwijl deze is geselecteerd.
Kan ik de gegenereerde CSS gebruiken met Tailwind?
Ja. Schakel het uitvoerformat naar "Tailwind-klasse" en het hulpmiddel verpakt dezelfde declaratie in de syntaxis voor willekeurige eigenschappen van Tailwind, bijv. `[filter:blur(4px)_grayscale(50%)]`, zodat u deze rechtstreeks in een `class`-attribuut kunt invoegen.
Wordt mijn invoer ergens geüpload?
Nee. Het filter wordt volledig in uw browser gegenereerd op basis van de opties die u instelt – niets wordt naar een server verzonden.