Handytool
UdviklerGratisKører lokalt

CSS box-shadow generator

Design CSS box-shadow værdier med live forhåndsvisning — forskydninger, blur, spread, opacity og inset.

Forhåndsvisning
CSS
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.18);

Justér skyderegulatorerne for at designe skyggen – kopier CSS når det ser korrekt ud.

Om CSS box-shadow generator

Handytools box-shadow generator giver dig skyders for forskydning, blur, spread, farve og opacity — og et live forhåndsvisning kort der opdateres når du træk. Slå inset skygger til, stem en farve ind via vælgeren, og kopier den resulterende box-shadow CSS deklaration direkte ind i dit stylesheet. Hele værktøjet kører i din browser; intet er uploaded.

Funktioner i CSS box-shadow generator

  • 01

    Hver parameter som en skyder

    Horisontale og vertikale forskydninger, blur radius, spread radius og opacity hver har deres egen skyder plus et numerisk input — fintune ved at træk, så knap ved tastatur til pixel præcision.

  • 02

    Inset skygger understøttet

    Flip inset knappen til at skifte fra en drop shadow til en indre skygge — nyttigt til trykke knapper, nedsænkede inputs og neumorphic overflader.

  • 03

    Farve + opacity, separat

    Vælg basisfarven i enhver hex værdi, så juster opacity uafhængigt. Outputtet bruger rgba() så farven og alpha forbliver læseligt når du kopier CSS.

Ofte stillede spørgsmål om CSS box-shadow generator

Hvad gør spread værdien?
Positiv spread udvider skyggen i alle retninger før blur bliver påført; negativ spread krymper den. Det er nyttigt til stramme, definerede glows når det parres med en lille blur.
Kan jeg tilføje flere skygger?
Denne generator udsender en enkelt skygge deklaration. For at lagdele skygger, kopier værdien, så indsæt den to gange i din CSS adskilt af et komma — box-shadow accepterer en komma-adskilt liste.
Hvorfor er min inset skygge usynlig?
Inset skygger tegnes indeni elementet, så de har brug for en baggrundsfarve eller padding for at være synlige. De vil heller ikke vises på gennemsigtige eller nul-størelse elementer.
Er forhåndsvisningen pixel-nøjagtig?
Ja — forhåndsvisningen bruger den rigtige CSS box-shadow egenskab på et rigtig element, så hvad du ser er præcis hvad dit stylesheet vil gengive.

Relaterede værktøjer

Udvikler →

Udforsk flere værktøjer

Alle værktøjer →