CSS Box Shadow-generator

Skapa flerskiktade CSS box-shadow-värden med liveförhandsvisning, inset-alternativ och exakta kontroller.

Lager1
Skapa flerskiktade CSS box-shadow-värden med liveförhandsvisning, inset-alternativ och exakta kontroller.
Lagerinställningar
Lager 1
px
px
px
px
Förhandsvisning
Kopiera box-shadow-värdet till din CSS.
box-shadow
CSS-utdata
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);

Vad är box-shadow?

Skapa flerskiktade CSS box-shadow-värden med liveförhandsvisning, inset-alternativ och exakta kontroller.

box-shadow är en CSS-egenskap som ritar en eller flera skuggor bakom (eller inuti) ett element.

Varje skugga använder horisontell och vertikal förskjutning, oskärperadie, valfri spridning och en färg med alfa; lägg till inset för en inre skugga.

Flera lager separeras med kommatecken, så du kan stapla subtila skuggor för djup, glöd eller skarpa kanter.

  • Små förskjutningar med mer oskärpa ger mjuk höjd.
  • Högre opacitet med lite oskärpa ger skarpare kanter.
  • Kombinera en yttre och en inre skugga för mer djup.
  • Begränsa antalet lager för bättre prestanda.