Softonic

CSS-filtergenerator

Steg 1 / 2
Nästa

CSS filter applicerar bildeffekter som oskärpa, ljusstyrka, kontrast och mättnad på vilket element som helst, inte bara bilder. Fel uppstår ofta när flera filter ska kedjas och enheterna ställas rätt. Den här generatorn bygger filter-deklarationen för de fem vanligaste funktionerna: oskärpa, ljusstyrka, kontrast, gråskala och mättnad. Ange dina värden och kopiera den genererade CSS-koden.

Så här bygger du en filterkedja

  1. 1

    Ange värdena

    Oskärpa i pixlar; ljusstyrka, kontrast, gråskala och mättnad i procent.

  2. 2

    Förstå skalan

    Ljusstyrka och kontrast på 100% betyder ingen förändring; på 0% blir elementet svart eller grått. Gråskala går från 0% (full färg) till 100% (helt avfärgat); mättnad på 100% behåller färgerna som de är.

  3. 3

    Generera CSS

    Klicka på knappen så skriver verktyget ut den kombinerade `filter`-regeln med alla fem funktioner.

  4. 4

    Kopiera regeln

    Kopiera resultatet och klistra in det i din stilmall.

  5. 5

    Kontrollera ordningen

    Funktionerna tillämpas från vänster till höger. Om effekten inte blir som väntat justerar du värdena.

Filterfunktioner

Funktion Enhet Effekt
blur() px Gaussisk oskärpa. 0 = ingen oskärpa
brightness() % eller decimaltal 100 % = ingen förändring, 0 % = svart, 200 % = dubbelt
contrast() % eller decimaltal 100 % = ingen förändring, 0 % = grått, 200 % = dubbelt
saturate() % eller decimaltal 100 % = ingen förändring, 0 % = gråskala
grayscale() % eller decimaltal 0 % = ingen förändring, 100 % = helt avmättad
sepia() % eller decimaltal 0 % = ingen förändring, 100 % = full sepia
hue-rotate() deg 0deg = ingen förändring. Roterar färghjulet
invert() % eller decimaltal 0 % = ingen förändring, 100 % = helt inverterad
opacity() % eller decimaltal Samma som egenskapen opacity
drop-shadow() x y oskärpa färg Som box-shadow men följer opacitet/clip-path

Ordningen i kedjan spelar roll

filter: brightness(0.5) saturate(2) tillämpar först ljusstyrka, sedan mättnad – de två filtren staplas på varandra.

filter: saturate(2) brightness(0.5) tillämpar först mättnad. Eftersom bilden är ljusare innan den mörknas blir färgmättnaden mer uttalad.

Den visuella skillnaden är subtil men verklig. Prova båda ordningarna när filterkedjan inte ser ut som du förväntade dig.

Vanliga recept

/* Blekt fotoutseende */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / blekt */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Duoton-approximation */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Mörka ner hero-bild */
filter: brightness(0.6);

/* Inaktiverat tillstånd */
filter: grayscale(1) opacity(0.6);

/* Frostat glas-överlägg */
filter: blur(12px) saturate(1.3);

backdrop-filter för frostat glas

filter gäller själva elementet; backdrop-filter gäller det som finns bakom ett halvgenomskinligt element – den frostade glaseffekt som iOS gjorde populär.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Stöd: alla moderna webbläsare; Firefox stöder det äntligen utan flagga från och med version 103.

Prestandatips

  • blur() är det dyraste filtret eftersom det kräver att varje pixel faltas med en kärna. En oskärpa på 30px på en 4K-hjältebild kostar verkliga bildrutor.
  • grayscale, sepia, brightness och liknande är färgtransformationer per pixel – billiga.
  • Filter GPU-accelereras i moderna webbläsare, men att animera blur() hackar fortfarande på svagare enheter.
  • Ange gärna will-change: filter innan du animerar.

filter: drop-shadow() jämfört med box-shadow

  • box-shadow följer elementets kantruta (respekterar border-radius).
  • filter: drop-shadow() följer elementets icke-genomskinliga pixlar, vilket innebär att den ritar efter formerna i clip-path, transparens i PNG och konturer i SVG.

För skuggor på beskurna eller transparenta bilder, använd drop-shadow. För vanliga kort och rutor är box-shadow snabbare.

Vanliga frågor

Ja – filtret tillämpas på elementet och alla dess underordnade som en grupp. Om du filtrerar en förälder inkluderas även barnelementen. För att endast filtrera föräldrens bakgrund placera innehållet i en separat staplingskontext eller använd backdrop-filter.

Eftersom oskärpan tillämpas på hela elementet, inklusive renderad text. Med enbart vanlig filter går det inte att göra bakgrunden suddig och samtidigt behålla texten skarp. Använd backdrop-filter på ett halvgenomskinligt överlägg och håll texten utanför det filtrerade elementet.

Ja, alla filterfunktioner går att animera. Håll koll på oskärpans prestanda på mobilen – att animera oskärpans radie är märkbart kostsamt. grayscale, sepia och brightness animeras billigt.

Ja, CSS filter gäller för SVG-element på samma sätt som för alla andra DOM-element. SVG har dessutom ett eget, mer avancerat <filter>-elementsystem, vilket är kraftfullare men mycket mer detaljerat.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

Färgpalettgenerator

Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

Slumpmässig färggenerator

Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.