CSS box-shadow-generator
CSS-box-shadow-generator med reglage för offset, oskärpa, spridning, färg och inset samt liveförhandsvisning. Kopiera färdig box-shadow-CSS, gratis i webbläsaren.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Slagskugga
Bädda in
Senast uppdaterad: 2026 · Gratis onlineverktyg
Vad är CSS box-shadow-generator?
CSS-box-shadow-generator med reglage för offset, oskärpa, spridning, färg och inset samt liveförhandsvisning. Kopiera färdig box-shadow-CSS, gratis i webbläsaren.
Så använder du
- 1Välj förinställning— Börja snabbt med en förinställningsknapp.
- 2Justera reglage— Justera skuggan med X/Y-förskjutning, oskärpa och spridningsreglage.
- 3Förhandsgranska— Kontrollera resultatet i realtid i förhandsgranskningen ovan.
- 4Kopiera CSS— Använd kopieringsknappen för att hämta box-shadow CSS.
Relaterade verktyg
CSS-gradientgeneratorVisuell CSS-gradientgenerator för linjära, radiella och koniska gradienter: sätt färgstopp, justera vinkeln och kopiera CSS-koden. Perfekt för bakgrunder och knappar, gratis i webbläsaren.
CSS border-radius-generatorCSS-border-radius-generator med åtta oberoende hörnhandtag och reglage samt liveförhandsvisning av den rundade formen. Kopiera färdig border-radius-CSS, gratis i webbläsaren.
CSS Flexbox-generatorCSS Flexbox-lekplats med visuell editor för justify-content, align-items, flex-direction och wrap plus liveförhandsvisning. Generera färdig Flexbox-CSS, gratis i webbläsaren.
FärgkodskonverterareFärgkonverterare mellan HEX-, RGB-, HSL- och OKLCH-koder, med WCAG-kontrastvärdet för två färger. Så kontrollerar du tillgängligheten medan du väljer palett, gratis i webbläsaren.
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.