CSS box-shadow-generator
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
Senast uppdaterad: 2026 · Gratis onlineverktyg
Vad är CSS box-shadow-generator?
Gratis online CSS box-shadow-generator med kontroller för offset, oskärpa, spridning, färg och inset, som ger en live-förhandsvisning av skuggan och skapar kopieringsklar box-shadow-CSS-kod.
Så använder du
- 1 Välj förinställning — Börja snabbt med en förinställningsknapp.
- 2 Justera reglage — Justera skuggan med X/Y-förskjutning, oskärpa och spridningsreglage.
- 3 Förhandsgranska — Kontrollera resultatet i realtid i förhandsgranskningen ovan.
- 4 Kopiera CSS — Använd kopieringsknappen för att hämta box-shadow CSS.
Relaterade verktyg
CSS-gradientgenerator Gratis visuell CSS-gradientgenerator: skapa linjära, radiella och koniska gradienter, justera färgstopp och vinkel och kopiera färdig CSS-kod för dina webbplatsbakgrunder.
CSS border-radius-generator Gratis online CSS border-radius-generator med åtta oberoende hörnhandtag och reglage, som ger en live-förhandsvisning av den rundade formen och skapar kopieringsklar border-radius-CSS-kod.
CSS Flexbox-generator Gratis online CSS Flexbox-lekplats med en visuell redigerare för justify-content, align-items, flex-direction och wrap, som visar en live-layoutförhandsvisning och genererar kopieringsklar Flexbox-CSS.
Vanliga frågor
Ja, använd knappen 'Lägg till skugga' för att lägga flera skuggor ovanpå varandra.
Ja, aktivera Inset-kryssrutan på varje skugga för att skapa en inre skugga.
Fem förinställningar erbjuds: Subtle, Medium, Large, Inset och Double.
Ja, du kan ange rgba(0,0,0,0.15) direkt i färginmatningsfältet.
Nej. Alla beräkningar sker i webbläsaren.