CSS-filtergenerator
Opret og visualiser brugerdefinerede CSS-billedfiltre
Preview
CSS Code
Filterkontrolelementer Farvetone
Populære filtre
Vintage
Neon Glow
Polaroid
Vintagefilm
Digital kunst
Sådan bruges CSS-filtre
Hvad er CSS-filtre?
CSS-filtre giver dig mulighed for at anvende grafiske effekter som sløring eller farveskift på et element. De bruges almindeligvis til billeder, baggrunde og kanter.
Filtre kan bruges til at skabe visuelle effekter, forbedre billeder eller skabe unikke designelementer uden behov for eksterne billedredigeringsværktøjer.
Understøttede CSS-filteregenskaber
-
blur()- Anvender en Gaussisk sløring på elementet. -
brightness()- Justerer elementets lysstyrke. -
contrast()- Justerer elementets kontrast. -
grayscale()- Konverterer elementet til gråtoner. -
hue-rotate()- Anvender en farvetonerotation på elementet. -
invert()- Inverterer elementets farver. -
opacity()- Justerer elementets opacitet. -
saturate()- Mæter eller afmætter elementet. -
sepia()- Konverterer elementet til sepia.
Sådan anvender du filtre
Ved hjælp af CSS-koden, der genereres af dette værktøj, kan du anvende filtre på ethvert HTML-element. Sådan gør du:
1. Vælg et element
Vælg det HTML-element, du vil anvende filteret på. Dette kan være et billede, en baggrund eller et hvilket som helst andet element.
2. Tilføj en klasse eller et id
Hvis elementet ikke allerede har en klasse eller et id, skal du tilføje et for at gøre det nemmere at målrette med CSS.
3. Anvend filteret
Brug CSS-egenskabenfilteri dit typografiark eller din indbyggede typografi til at anvende det genererede filter.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Kombiner flere filtre
Du kan kombinere flere filterfunktioner ved at liste dem efter hinanden, adskilt af mellemrum.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);browserkompatibilitet
understøttes bredt i moderne browsere, herunder Chrome, Firefox, Safari, Edge og Opera. Ældre browsere som Internet Explorer understøtter dem dog ikke.
Related Tools
SCSS til CSS konverter
Omdan din SCSS-kode til CSS. Hurtigt, nemt og sikkert.
Stylus til CSS-konverter
Omdan din SCSS-kode til CSS. Hurtigt, nemt og sikkert.
Sass til CSS konverter
Omdan din Sass-kode til CSS. Hurtigt, nemt og sikkert.
Fjern linjeskift fra din tekst
Konverter tekst med flere linjer til en enkelt kontinuerlig linje med vores brugervenlige værktøj.
Energienhedskonvertering
Konverter mellem forskellige energienheder med præcision og lethed
Effektenhedskonverter
Konverter mellem forskellige effektenheder med præcision til dine tekniske og videnskabelige behov