CodeKitHubVad är detta verktyg?
box-shadow är CSS-egenskapen som ritar en skugga bakom (eller inuti) ett element. Skriven för hand tar den upp till fem värden i ordning — horisontell förskjutning, vertikal förskjutning, oskärperadie, spridningsradie, och en färg — plus ett valfritt inset-nyckelord, allt som är lätt att blanda ihop eller göra för svagt/för kraftigt på första försöket.
Det här verktyget gör om det till direkt manipulation: dra ett reglage, se skuggan förändras i den levande förhandsvisningsrutan, och kopiera exakt CSS när den ser rätt ut. Färgväljaren plus ett opacitetsreglage genererar automatiskt ett korrekt rgba()-värde, eftersom transparenta skuggor generellt ser bättre ut än helt ogenomskinliga.
Varför använda det?
- Levande förhandsvisning uppdateras direkt när du justerar valfri kontroll — se den exakta skuggan innan du binder dig till kod.
- Full kontroll över offset-x, offset-y, oskärpa, spridning, färg och opacitet på ett ställe.
- Ett klick lägger till inset för ett intryckt/försänkt utseende istället för en flytande fallande skugga.
- Genererar kopieringsklar CSS med färgen redan konverterad till rgba() vid din valda opacitet.
- Körs helt i din webbläsare — ingenting du konfigurerar laddas upp någonstans.
- Gratis, ingen registrering, fungerar på mobilen.
Så använder du det
- Ställ in offset-x och offset-y för att placera skuggan — positiva värden flyttar den höger/ner, negativa värden flyttar den vänster/upp.
- Öka oskärperadien för att mjuka upp skuggans kant; öka spridningen för att göra skuggan större än själva elementet.
- Välj en färg och justera opaciteten — de flesta realistiska skuggor använder 15–40 % opacitet istället för solid svart.
- Markera "inset" om du vill att skuggan ska visas inuti elementets kantlinje istället för bakom den.
- Kopiera den genererade CSS:en och klistra in den i ditt stilmallsdokument.
Exempel
Inmatning
Förskjutning: 0px, 10px · Oskärpa: 20px · Spridning: 0px · Färg: svart vid 35 % opacitetResultat
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);En mjuk skugga direkt under elementet utan horisontell förskjutning — en av de vanligaste skuggstilarna för kort/knappar.
Enkel skugga jämfört med lagerdelade skuggor
Det här verktyget bygger ett enda skugglager, vilket täcker de allra flesta verkliga användningsfall — knappar, kort, modaler och rullgardinsmenyer använder nästan alltid en skugga. CSS stöder kommaseparerade flera skuggor på samma element för mer utarbetade djupeffekter (t.ex. en tät, mörk skugga lagd under en mjuk, bred), men det är en förfining du kan lägga till för hand: generera en skugga här, duplicera sedan raden, justera det andra värdesetet, och koppla ihop dem med ett kommatecken.
Vanliga box-shadow-mönster
- Subtilt kortlyft: liten förskjutning (0–4px), måttlig oskärpa (8–16px), 10–20 % opacitet svart.
- Upphöjd modal/rullgardinsmeny: större förskjutning (4–10px) och oskärpa (20–30px), 20–35 % opacitet för en starkare känsla av flytande.
- Intryckt/infälld knapp: markera inset, använd en liten "negativ" förskjutning och måttlig oskärpa så att skuggan läses som en buckla snarare än ett lyft.
- Färgad glöd: välj en varumärkesfärg istället för svart, höj opaciteten till 40–60 %, och öka spridningen något för en mjuk glödeffekt runt knappar.
- Skarp/hård skugga: sätt oskärpa till 0 och spridning till 0 för en solid, förskjuten silhuett istället för en mjuk skugga.
Kombinera med rundade hörn
Skuggor och rundade hörn används tillsammans hela tiden — kort, knappar och modaler kombinerar nästan alltid båda. Använd Border Radius-generatorn för att runda samma elements hörn, och applicera sedan båda genererade CSS-deklarationerna tillsammans.
Vanliga frågor
Vad är skillnaden mellan oskärpa och spridning?
Oskärperadien mjukar upp skuggans kant — högre värden gör att den tonar ut mer gradvis. Spridningsradien ändrar skuggans storlek innan oskärpan tillämpas — en positiv spridning gör skuggan större än elementet på alla sidor, en negativ spridning krymper den. De flesta vardagliga skuggor använder oskärpa med spridningen kvar på 0.
Varför använda rgba() istället för en vanlig hex-färg för skuggan?
En helt ogenomskinlig skugga ser hård och orealistisk ut — riktiga skuggor är alltid något genomskinliga och låter det som ligger bakom dem synas svagt igenom. rgba() låter dig ställa in den transparensen direkt, vilket är varför det här verktyget alltid genererar färgen med ett alfavärde istället för en solid hex.
Vad gör nyckelordet inset?
Utan inset ritas skuggan utanför elementets kantlinje, som om elementet flyter ovanför sidan. Med inset ritas skuggan istället inuti kantlinjen, vilket får elementet att se intryckt eller försänkt ut — vanligt vid aktiva/nedtryckta knapptillstånd eller inmatningsfält.
Kan jag stapla mer än en skugga på samma element?
Ja — CSS box-shadow accepterar en kommaseparerad lista, och webbläsare renderar dem i den angivna ordningen (den första skuggan ligger överst). En vanlig teknik lager en tät, mörkare skugga med en bredare, mjukare för mer realistiskt djup än någon av dem ger på egen hand.
Påverkar box-shadow layouten eller bara utseendet?
Endast utseendet — box-shadow påverkar aldrig elementets storlek eller placeringen av omgivande element, även med stora oskärpa- eller spridningsvärden. Om skuggan klipps visuellt, kontrollera overflow: hidden på ett föräldraelement istället för skuggans egna värden.