CodeKitHubHvad er dette værktøj?
box-shadow er CSS-egenskaben, der tegner en skygge bag (eller inde i) et element. Skrevet i hånden kræver den op til fem værdier i rækkefølge — vandret forskydning, lodret forskydning, sløringsradius, spredningsradius og en farve — plus et valgfrit inset-nøgleord, hvilket alt sammen er let at blande sammen eller gøre for subtilt/for kraftigt i første forsøg.
Dette værktøj gør det til direkte manipulation: træk en skyder, se skyggen ændre sig på den live forhåndsvisningsboks, og kopiér den præcise CSS, når den ser rigtig ud. Farvevælgeren plus en opacitetsskyder genererer automatisk en korrekt rgba()-værdi, da gennemsigtige skygger generelt ser bedre ud end helt uigennemsigtige.
Hvorfor bruge det?
- Live forhåndsvisning opdateres øjeblikkeligt, mens du justerer en hvilken som helst indstilling — se den præcise skygge, før du forpligter dig til kode.
- Fuld kontrol over offset-x, offset-y, sløring, spredning, farve og opacitet ét sted.
- Ét klik tilføjer inset for et indtrykt/fordybet udseende i stedet for en svævende slagskygge.
- Genererer klar-til-indsætning CSS med farven allerede konverteret til rgba() ved din valgte opacitet.
- Kører udelukkende i din browser — intet du konfigurerer uploades nogen steder hen.
- Gratis, ingen tilmelding, fungerer på mobil.
Sådan bruger du det
- Indstil offset-x og offset-y for at placere skyggen — positive værdier skubber den til højre/nedad, negative værdier skubber den til venstre/opad.
- Øg sløringsradiusen for at blødgøre skyggens kant; øg spredningen for at gøre skyggen større end selve elementet.
- Vælg en farve og justér opaciteten — de fleste realistiske skygger bruger 15-40% opacitet frem for massiv sort.
- Markér "inset", hvis du vil have skyggen til at fremstå inde i elementets kant i stedet for bag den.
- Kopiér den genererede CSS og indsæt den i dit stylesheet.
Eksempel
Input
Forskydning: 0px, 10px · Sløring: 20px · Spredning: 0px · Farve: sort ved 35% opacitetOutput
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);En blød skygge direkte under elementet uden vandret forskydning — en af de mest almindelige kort-/knapskyggestile.
Enkelt skygge vs. lagdelte skygger
Dette værktøj bygger ét skyggelag, hvilket dækker langt de fleste virkelige brugstilfælde — knapper, kort, modaler og dropdowns bruger næsten altid én skygge. CSS understøtter dog kommaseparerede, flere skygger på det samme element til mere elaborerede dybdeeffekter (f.eks. en tæt, mørk skygge lagt under en blød, bred en), men det er en finpudsning, du kan tilføje manuelt: generér én skygge her, duplikér derefter linjen, justér det andet sæt værdier, og sammenføj dem med et komma.
Almindelige box-shadow-mønstre
- Diskret kortløft: lille forskydning (0-4px), moderat sløring (8-16px), 10-20% opacitet sort.
- Hævet modal/dropdown: større forskydning (4-10px) og sløring (20-30px), 20-35% opacitet for en stærkere svæve-fornemmelse.
- Indtrykt/inset-knap: markér inset, brug en let negativt følende forskydning og moderat sløring, så skyggen læses som en fordybning frem for et løft.
- Farvet glød: vælg en brandfarve i stedet for sort, hæv opaciteten til 40-60%, og øg spredningen en smule for en blød glødeeffekt omkring knapper.
- Skarp/hård skygge: sæt sløring til 0 og spredning til 0 for en massiv, forskudt silhuet frem for en blød skygge.
Kombinér med afrundede hjørner
Skygger og afrundede hjørner bruges konstant sammen — kort, knapper og modaler kombinerer næsten altid begge dele. Brug Border Radius-generatoren til at runde det samme elements hjørner, og anvend derefter begge genererede CSS-erklæringer sammen.
Ofte stillede spørgsmål
Hvad er forskellen mellem sløring og spredning?
Sløringsradius blødgør skyggens kant — højere værdier gør den mere gradvis udtonende. Spredningsradius ændrer skyggens størrelse før sløring — en positiv spredning gør skyggen større end elementet på alle sider, en negativ spredning formindsker den. De fleste hverdagsskygger bruger sløring med spredningen sat til 0.
Hvorfor bruge rgba() i stedet for en almindelig hex-farve til skyggen?
En helt uigennemsigtig skygge ser hård og urealistisk ud — rigtige skygger er altid noget gennemsigtige og lader det, der er bag dem, skinne lidt igennem. rgba() lader dig indstille den gennemsigtighed direkte, hvilket er grunden til, at dette værktøj altid genererer farven med en alpha-værdi frem for en massiv hex.
Hvad gør inset-nøgleordet?
Uden inset tegnes skyggen uden for elementets kant, som om elementet svæver over siden. Med inset tegnes skyggen i stedet inde i kanten, hvilket får elementet til at se indtrykt eller fordybet ud — almindeligt brugt til aktive/nedtrykte knaptilstande eller inputfelter.
Kan jeg stable mere end én skygge på det samme element?
Ja — CSS box-shadow accepterer en kommasepareret liste, og browsere gengiver dem i den angivne rækkefølge (den første skygge er øverst). En almindelig teknik lægger en tæt, mørkere skygge sammen med en bredere, blødere for mere realistisk dybde, end nogen af dem giver alene.
Påvirker box-shadow layoutet, eller kun udseendet?
Kun udseendet — box-shadow påvirker aldrig elementets størrelse eller placeringen af omkringliggende elementer, selv med store sløring- eller spredningsværdier. Hvis skyggen bliver visuelt beskåret, tjek for overflow: hidden på et forælderelement frem for skyggens egne værdier.