CodeKitHubHva er dette verktøyet?
box-shadow er CSS-egenskapen som tegner en skygge bak (eller inni) et element. Skrevet for hånd tar den opptil fem verdier i rekkefølge — horisontal forskyvning, vertikal forskyvning, uskarphetsradius, spredningsradius og en farge — pluss et valgfritt inset-nøkkelord, alt sammen lett å blande sammen eller gjøre for svakt/for kraftig på første forsøk.
Dette verktøyet gjør det om til direkte manipulasjon: dra en glidebryter, se skyggen endre seg i den levende forhåndsvisningsboksen, og kopier den nøyaktige CSS-en når den ser riktig ut. Fargevelgeren pluss en opasitetsglidebryter genererer automatisk en riktig rgba()-verdi, siden gjennomsiktige skygger som regel ser bedre ut enn helt ugjennomsiktige.
Hvorfor bruke det?
- Levende forhåndsvisning oppdateres momentant når du justerer en kontroll — se den nøyaktige skyggen før du forplikter deg til kode.
- Full kontroll over offset-x, offset-y, uskarphet, spredning, farge og opasitet på ett sted.
- Ett klikk legger til inset for et inntrykt/nedsenket utseende i stedet for en flytende slagskygge.
- Gir ferdig CSS klar til å lime inn, med fargen allerede konvertert til rgba() ved valgt opasitet.
- Kjører helt i nettleseren din — ingenting du stiller inn blir lastet opp noe sted.
- Gratis, ingen registrering, fungerer på mobil.
Slik bruker du det
- Still inn offset-x og offset-y for å plassere skyggen — positive verdier flytter den til høyre/ned, negative verdier flytter den til venstre/opp.
- Øk uskarphetsradiusen for å mykne skyggens kant; øk spredningen for å gjøre skyggen større enn selve elementet.
- Velg en farge og juster opasiteten — de fleste realistiske skygger bruker 15–40 % opasitet i stedet for solid svart.
- Kryss av for «inset» hvis du vil at skyggen skal vises inni elementets kant i stedet for bak den.
- Kopier den genererte CSS-en og lim den inn i stilarket ditt.
Eksempel
Inndata
Forskyvning: 0px, 10px · Uskarphet: 20px · Spredning: 0px · Farge: svart ved 35 % opasitetResultat
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);En myk skygge rett under elementet uten horisontal forskyvning — en av de vanligste skyggestilene for kort og knapper.
Én skygge eller lagdelte skygger
Dette verktøyet lager ett skyggelag, som dekker de aller fleste reelle bruksområder — knapper, kort, modaler og nedtrekksmenyer bruker nesten alltid én skygge. CSS støtter kommaseparerte flere skygger på samme element for mer utarbeidede dybdeeffekter (for eksempel en tett, mørk skygge lagt under en myk, bred), men det er en finpuss du kan legge til for hånd: generer én skygge her, dupliser linjen, juster det andre verdisettet, og koble dem sammen med et komma.
Vanlige box-shadow-mønstre
- Subtil kortløft: liten forskyvning (0–4px), moderat uskarphet (8–16px), 10–20 % opasitet svart.
- Hevet modal/nedtrekksmeny: større forskyvning (4–10px) og uskarphet (20–30px), 20–35 % opasitet for en sterkere følelse av flyting.
- Inntrykt/innfelt knapp: kryss av for inset, bruk en litt «negativ» forskyvning og moderat uskarphet slik at skyggen leses som en bulk snarere enn et løft.
- Fargeglød: velg en merkefarge i stedet for svart, øk opasiteten til 40–60 %, og øk spredningen litt for en myk gløeffekt rundt knapper.
- Skarp/hard skygge: sett uskarphet til 0 og spredning til 0 for en solid, forskjøvet silhuett i stedet for en myk skygge.
Kombinere med avrundede hjørner
Skygger og avrundede hjørner brukes sammen hele tiden — kort, knapper og modaler kombinerer nesten alltid begge deler. Bruk Border Radius-generatoren til å runde av hjørnene på samme element, og bruk deretter begge de genererte CSS-erklæringene sammen.
Ofte stilte spørsmål
Hva er forskjellen mellom uskarphet og spredning?
Uskarphetsradiusen mykner skyggens kant — høyere verdier gjør at den toner ut mer gradvis. Spredningsradiusen endrer skyggens størrelse før uskarpheten legges på — en positiv spredning gjør skyggen større enn elementet på alle sider, en negativ spredning krymper den. De fleste hverdagslige skygger bruker uskarphet med spredningen liggende på 0.
Hvorfor bruke rgba() i stedet for en vanlig hex-farge for skyggen?
En helt ugjennomsiktig skygge ser hard og urealistisk ut — ekte skygger er alltid litt gjennomsiktige, slik at det som ligger bak dem skinner svakt gjennom. rgba() lar deg stille inn den gjennomsiktigheten direkte, og det er derfor dette verktøyet alltid genererer fargen med en alfaverdi i stedet for en solid hex.
Hva gjør inset-nøkkelordet?
Uten inset tegnes skyggen utenfor elementets kant, som om elementet svever over siden. Med inset tegnes skyggen i stedet inni kanten, noe som får elementet til å se inntrykt eller nedsenket ut — vanlig for aktive/trykte knappetilstander eller inndatafelt.
Kan jeg stable mer enn én skygge på samme element?
Ja — CSS box-shadow godtar en kommaseparert liste, og nettlesere gjengir dem i den oppgitte rekkefølgen (den første skyggen ligger øverst). En vanlig teknikk er å legge en tett, mørkere skygge sammen med en bredere, mykere for et mer realistisk dybdeinntrykk enn noen av dem gir alene.
Påvirker box-shadow layouten eller bare utseendet?
Bare utseendet — box-shadow påvirker aldri elementets størrelse eller plasseringen av omkringliggende elementer, selv med store uskarphets- eller spredningsverdier. Hvis skyggen blir visuelt beskåret, sjekk overflow: hidden på et foreldreelement i stedet for skyggens egne verdier.