CSS Box Shadow Generator
Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
Hvad er CSS box-shadow?
CSS box-shadow er en CSS-egenskab, der tilføjer skyggeeffekter omkring et elements ramme. Det giver dig mulighed for at oprette drop shadows, indre skygger og flere skyggelag ved at angive forskydning, sløringsradius, spredningsradius og farveværdier.
Hvad er parametrene for box-shadow?
box-shadow-egenskaben accepterer flere værdier: vandret forskydning (X), lodret forskydning (Y), sløringsradius, spredningsradius, farve og det valgfri nøgleord inset. Du kan også angive flere skygger adskilt af kommaer.
Hvad er nøgleordet inset?
Nøgleordet inset ændrer skyggen fra en ydre skygge (drop shadow) til en indre skygge. Når inset er angivet, tegnes skyggen inden for elementets kant i stedet for udenfor, hvilket skaber en inset-effekt.
Hvad er sløringsradius?
Sløringsradius bestemmer, hvor meget skyggens kant sløres. En værdi på 0 skaber en skarp, solid kant. Større værdier skaber en mere diffus, blødere skygge, der strækker sig længere fra elementet.
Hvad er spredningsradius?
Spredningsradius udvider eller sammentrækker skyggens størrelse. Positive værdier gør skyggen større end elementet, mens negative værdier gør den mindre. Dette påvirker skyggen, før sløring anvendes.
Hvordan opretter jeg flere skygger?
Du kan oprette flere skygger ved at adskille hver skyggedefinition med et komma. Hver skygge kan have forskellige forskydnings-, slørings-, sprednings- og farveværdier. Skygger anvendes i den rækkefølge, de er erklæret, med den første skygge øverst.
Kan jeg bruge RGBA-farver til skygger?
Ja, du kan bruge ethvert CSS-farveformat, herunder RGBA, HSLA, HEX eller navngivne farver. RGBA og HSLA er særligt nyttige til at oprette halvtransparente skygger, der blandes naturligt med baggrunde.
Hvordan kopierer jeg den genererede CSS-kode?
Bare klik på "Kopier kode"-knappen i generatorgrænsefladen. CSS-koden kopieres til din udklipsholder og kan indsættes direkte i dit stylesheet eller din HTML-fil.
Understøttes box-shadow i alle browsere?
Ja, box-shadow understøttes i alle moderne browsere, herunder Chrome, Firefox, Safari, Edge og Opera. Det har været en del af CSS3 siden 2011 og har fremragende browserkompatibilitet.
Påvirker box-shadow ydeevnen?
box-shadow har minimal indvirkning på ydeevnen for moderne browsere. Brug af flere komplekse skygger med stor sløringsradius på mange elementer kan dog påvirke renderingsydeevnen, især på mobile enheder.
Hvad er almindelige brugstilfælde for box-shadow?
Almindelige anvendelser inkluderer at oprette kort hævelseseffekter, tilføje dybde til knapper, oprette inset-formularfelter, implementere material design-skygger og tilføje visuel adskillelse mellem overlappende elementer.
Kan jeg animere box-shadow?
Ja, box-shadow kan animeres ved hjælp af CSS-overgange eller animationer. At animere box-shadow kan dog være ydeevnekrævende. For bedre ydeevne kan du overveje at bruge pseudo-elementer med opacitetsovergange i stedet.
Sådan bruges CSS Box Shadow Generator
Form CSS box-skygger visuelt i stedet for at gætte værdier. Generatoren kører lokalt i din browser, og intet af det, du indtaster, uploades.
- Indstil H-Offset og V-Offset for at flytte skyggen på tværs og op eller ned.
- Hæv Blur for blødere kanter, og brug Spread til at gøre skyggen større eller mindre.
- Vælg en Color og juster Opacity for et blødere, mere naturligt udtryk.
- Sæt flueben i Inset for at tegne skyggen inde i elementet i stedet for udenom.
- Kopiér den færdige box-shadow-regel fra forhåndsvisningen ind i dit stylesheet.
Lidt blur med en svagt positiv V-Offset giver en diskret, realistisk kontaktskygge lige under elementet.
Relaterede værktøjer
- CSS Border Radius Generator Visuel CSS border-radius generator. Juster hvert hjørne uafhængigt med realtidsforhåndsvisning og kopier CSS-koden med det samme.
- CSS-gradientgenerator Opret fantastiske CSS-gradienter visuelt. Generer lineære, radielle og koniske gradienter med flere farvestop, vinkler og positioner. Kopier produktionsklar CSS-kode øjeblikkeligt.
- CSS Grid-generator Gratis visuel CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouts interaktivt og eksporter produktionsklar CSS-kode direkte.
- CSS Flexbox-generator Visuel CSS Flexbox-generator med live forhåndsvisning. Juster flex-egenskaper og få CSS-kode klar til brug.
- Border-radius Generator Gratis kreativ border-radius-generator online. Træk i 8 håndtag eller vælg en blob-forudindstilling for at skabe organiske CSS-former og kopiere koden med det samme.
- Farvekonverter Gratis online farvekonverter. Konverter HEX, RGB, HSL, HSV formater øjeblikkeligt med visuel vælger. 100% privat, kører i din browser.
- CSS Easing-generator Gratis online CSS easing-generator. Træk cubic-bezier-kontrollpunkterne på en interaktiv kurve, vælg mellem 18 forudindstillinger, se en loopende boldanimation og kopiér tidsfunktionen med det samme.
- CSS Tekstskyggegenerator Gratis online tekstskyggegenerator. Stabl flere skyggelag med forskydning, sløring, farve og gennemsigtighed, prøv forudindstillinger som Neon, 3D, Retro og kopier CSS-koden med det samme.