CSS Box Shadow Generator
Gratis online CSS box-shadow generator. Lag vakre skygger visuelt med justerbar forskyvning, uskarphet, spredning, farge og innfelt. Live forhåndsvisning og umiddelbar kodekopiering.
Hva er CSS box-shadow?
CSS box-shadow er en CSS-egenskap som legger til skyggeeffekter rundt et elements ramme. Det lar deg lage drop shadows, indre skygger og flere skyggelag ved å spesifisere forskyvning, uskarphet-radius, spredning-radius og fargeverdier.
Hva er parameterne til box-shadow?
box-shadow-egenskapen godtar flere verdier: horisontal forskyvning (X), vertikal forskyvning (Y), uskarphet-radius, spredning-radius, farge og det valgfrie nøkkelordet inset. Du kan også spesifisere flere skygger atskilt med komma.
Hva er nøkkelordet inset?
Nøkkelordet inset endrer skyggen fra en ytre skygge (drop shadow) til en indre skygge. Når inset er spesifisert, tegnes skyggen inne i elementets kant i stedet for utenfor, noe som skaper en inset-effekt.
Hva er uskarphet-radius?
Uskarphet-radius bestemmer hvor mye skyggens kant er uskarp. En verdi på 0 skaper en skarp, solid kant. Større verdier skaper en mer diffus, mykere skygge som strekker seg lenger fra elementet.
Hva er spredning-radius?
Spredning-radius utvider eller trekker sammen skyggens størrelse. Positive verdier gjør skyggen større enn elementet, mens negative verdier gjør den mindre. Dette påvirker skyggen før uskarphet brukes.
Hvordan lager jeg flere skygger?
Du kan lage flere skygger ved å skille hver skyggedefinisjon med et komma. Hver skygge kan ha forskjellige forskyvning-, uskarphet-, spredning- og fargeverdier. Skygger brukes i den rekkefølgen de er deklarert, med den første skyggen øverst.
Kan jeg bruke RGBA-farger for skygger?
Ja, du kan bruke ethvert CSS-fargeformat inkludert RGBA, HSLA, HEX eller navngitte farger. RGBA og HSLA er spesielt nyttige for å lage halvtransparente skygger som blander seg naturlig med bakgrunner.
Hvordan kopierer jeg den genererte CSS-koden?
Bare klikk på "Kopier kode"-knappen i generatorgrensesnittet. CSS-koden kopieres til utklippstavlen og kan limes direkte inn i stilarket eller HTML-filen din.
Støttes box-shadow i alle nettlesere?
Ja, box-shadow støttes i alle moderne nettlesere inkludert Chrome, Firefox, Safari, Edge og Opera. Det har vært en del av CSS3 siden 2011 og har utmerket nettleserkompatibilitet.
Påvirker box-shadow ytelsen?
box-shadow har minimal innvirkning på ytelsen til moderne nettlesere. Bruk av flere komplekse skygger med stor uskarphet-radius på mange elementer kan imidlertid påvirke renderingsytelsen, spesielt på mobile enheter.
Hva er vanlige bruksområder for box-shadow?
Vanlige bruksområder inkluderer å lage kort hevingseffekter, legge til dybde til knapper, lage inset-formularfelt, implementere material design-skygger og legge til visuell separasjon mellom overlappende elementer.
Kan jeg animere box-shadow?
Ja, box-shadow kan animeres ved å bruke CSS-overganger eller animasjoner. Å animere box-shadow kan imidlertid være ytelseskrevende. For bedre ytelse, vurder å bruke pseudo-elementer med opasitetsoverganger i stedet.