Handytool
UtvecklareGratisKörs lokalt

CSS box-shadow-generator

Designa CSS box-shadow-värden med live-förhandsvisning — förskjutningar, suddighet, spridning, opacitet och inset.

Förhandsgranskning
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Justera skjutreglagen för att designa skuggan – kopiera CSS när det ser rätt ut.

Om CSS box-shadow-generator

Handytools box-shadow-generator ger dig skjutreglage för förskjutning, suddighet, spridning, färg och opacitet — och ett live-förhandsvisningskort som uppdateras när du drar. Slå på/av inset-skuggor, justera en färg via väljaren och kopiera den resulterande box-shadow CSS-deklarationen direkt in i din stilmall. Hela verktyget körs i din webbläsare; ingenting laddas upp.

Funktioner i CSS box-shadow-generator

  • 01

    Varje parameter som ett skjutreglage

    Horisontella och vertikala förskjutningar, suddighetsradie, spridningsradie och opacitet har vardera ett eget skjutreglage plus en numerisk inmatning — finjustera genom att dra, justera sedan med tangentbordet för pixelprecision.

  • 02

    Inset-skuggor stöds

    Slå på/av inset-växeln för att byta från en droppskyga till en inre skyga — användbar för tryckta knappar, sjunkna inmatningar och neumorfiska ytor.

  • 03

    Färg + opacitet, separat

    Välj basfärgen i ett hex-värde, justera sedan opacitet oberoende. Utmatningen använder rgba() så färgen och alfa förblir läsbar när du kopierar CSS:en.

Vanliga frågor om CSS box-shadow-generator

Vad gör spridningsvärdet?
Positiv spridning förstoring skuggan i alla riktningar innan suddigheten appliceras; negativ spridning krymper den. Det är användbart för snäva, definierade glödar när det kombineras med en liten suddigheit.
Kan jag lägga till flera skuggor?
Den här generatorn matar ut en enda skugga-deklaration. För att lagra skuggor, kopiera värdet, klistra sedan in det två gånger i din CSS åtskild med ett komma — box-shadow accepterar en kommaavgränsad lista.
Varför är min inset-skyga osynlig?
Inset-skuggor dras inuti elementet, så de behöver en bakgrundsfärg eller polstring för att vara synlig. De visas heller inte på genomskinliga eller nolstorlekar.
Är förhandsvisningen pixelkorrekt?
Ja — förhandsvisningen använder den faktiska CSS box-shadow-egenskapen på ett verkligt element, så det du ser är exakt vad din stilmall kommer att rendera.

Guider

Artiklar →

Relaterade verktyg

Utvecklare →

Utforska fler verktyg

Alla verktyg →