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
Sass til CSS konverter
Omdan din Sass-kode til CSS. Hurtigt, nemt og sikkert.
CSS til LESS-konverter
Omdan din CSS-kode til LESS med variabler, indlejring og meget mere. Hurtigt, nemt og sikkert.
Less til CSS Konverter
Omdan din Less-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.
Procentberegner
Beregn nemt procenter med vores intuitive procentberegner.
Opret en brugerdefineret privatlivspolitik
en omfattende privatlivspolitik, der er skræddersyet til dit websted, din app eller din tjeneste.