CSS-filtergenerator
Skapa en CSS-filter- eller backdrop-filter-deklaration med visuella kontroller.
CSS-filtergenerator
Det här verktyget bygger en klar CSS-filter- (eller backdrop-filter-) deklaration från en uppsättning visuella kontroller, så du inte behöver komma ihåg syntaxen för att kombinera blur, ljusstyrka, kontrast, gråskala, nyansrotation, invertera, opacitet, mättnad, sepia och drop-shadow i en enda egenskap. Det är avsett för alla som utformar ett fotogalleri, en hovra-effekt, en frosted-glass-panel eller en tematisk bildbehandling utan att behöva skriva filterfunktionslistan för hand.
Varje funktion har sitt eget fält, och det genererade värdet listar bara de som du faktiskt har ändrat – så en sida med bara en liten blur förblir kort istället för att lista nio no-op-funktioner. Funktionsordningsfältet styr i vilken ordning de körs, eftersom CSS-filter tillämpas från vänster till höger och omordningen av dem (blur före eller efter justering av kontrast) kan ändra det visuella resultatet. Två förinställningar, Vintage och Svartvit, ställer in en hel grupp av värden på en gång för ett vanligt utseende. Växla "backdrop-filter" för att filtrera det som är synligt bakom ett element istället för själva elementet – standardvalet för glasmorfismspaneler – och växla utmatningsformatet för att få en Tailwind-klass med godtyckligt värde istället för en enkel CSS-rad.
Numeriska fält begränsas automatiskt till rimliga intervall, så ett oavsiktligt stort eller negativt värde bryter aldrig utmatningen; fältet för skuggfärg accepterar alla CSS-färgvärden. Resultatet uppdateras direkt när du justerar något alternativ, och summan ovanför utmatningen räknar hur många funktioner som faktiskt är aktiva.
Allt körs lokalt i din webbläsare – ingenting du anger här laddas upp eller skickas någonstans. Kopiera resultatet, ladda ned det som en .txt-fil, eller skicka det till inmatningen av ett annat verktyg för att fortsätta arbeta med det.