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.
Slik bruker du CSS Box Shadow Generator
Form CSS boksskygger visuelt i stedet for å gjette verdier. Generatoren kjører lokalt i nettleseren din, og ingenting du skriver inn lastes opp.
- Sett H-Offset og V-Offset for å flytte skyggen sidelengs og opp eller ned.
- Øk Blur for mykere kanter, og bruk Spread til å gjøre skyggen større eller mindre.
- Velg en Color og juster Opacity for et mykere og mer naturlig uttrykk.
- Kryss av for Inset for å tegne skyggen inne i elementet i stedet for rundt det.
- Kopier den ferdige box-shadow-regelen fra forhåndsvisningen inn i stilarket ditt.
Liten blur med en svakt positiv V-Offset gir en diskret, realistisk kontaktskygge rett under elementet.
Relaterte verktøy
- CSS Border Radius Generator Visuell CSS border-radius generator. Juster hvert hjørne uavhengig med sanntidsforhåndsvisning og kopier CSS-koden umiddelbart.
- CSS-gradientgenerator Lag fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere fargestopp, vinkler og posisjoner. Kopier produksjonsklar CSS-kode umiddelbart.
- CSS Grid-generator Gratis visuell CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouter interaktivt og eksporter produksjonsklar CSS-kode direkte.
- CSS Flexbox-generator Visuell CSS Flexbox-generator med live forhåndsvisning. Juster flex-egenskaper og få CSS-kode klar til bruk.
- Border-radius Generator Gratis kreativ border-radius-generator online. Dra i 8 håndtak eller velg en blob-forhåndsinnstilling for å lage organiske CSS-former og kopiere koden umiddelbart.
- Fargekonverterer Gratis online fargekonverterer. Konverter HEX, RGB, HSL, HSV formater umiddelbart med visuell velger. 100% privat, kjører i nettleseren din.
- CSS Easing-generator Gratis online CSS easing-generator. Dra cubic-bezier-kontrollpunktene på en interaktiv kurve, velg blant 18 forhåndsinnstillinger, se en loope ballanimasjon og kopier tidsfunksjonen med en gang.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabble flere skyggelag med forskyvning, uskarphet, farge og gjennomsiktighet, prøv forhåndsinnstillinger som Neon, 3D, Retro og kopier CSS-koden med en gang.