CSS-skugggenerator
Skapa vackra CSS box shadows med live förhandsgranskning och flera lager
Skapa vackra CSS box shadows med live förhandsgranskning och flera lager
- Förbered inmatningen
Välj lämpliga alternativ med kontrollerna nedan.
- Kör uppgiften
Justera kontrollerna nedan och granska förhandsvisningen.
- Använd resultatet
Kontrollera resultatet och använd tillgängliga kopierings- eller nedladdningsfunktioner.
Pixelskuggor som CSS, SCSS, Tailwind-klass eller JavaScript. Färgvariabler behöver definitioner på målsidan. Tailwind använder godtyckliga värden; kontrollera i målprojektet.
Genererad Kod
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Skuggkontroller
px
px
px
px
Förhandsgranskningsinställningar
200px
Live Förhandsgranskning
Preview
Skuggförinställningar
Subtila Skuggor
Medelskuggor
Starka Skuggor
Material Design
Neumorfisk
CSS-skugggenerator
Pixelskuggor som CSS, SCSS, Tailwind-klass eller JavaScript. Färgvariabler behöver definitioner på målsidan. Tailwind använder godtyckliga värden; kontrollera i målprojektet.
Funktioner
- Pixelskuggor som CSS, SCSS, Tailwind-klass eller JavaScript. Färgvariabler behöver definitioner på målsidan. Tailwind använder godtyckliga värden; kontrollera i målprojektet.
- Skugglager
- Live Förhandsgranskning
- Skuggförinställningar
Hur man använder
- Justera skuggegenskaper med reglage
- Välj skuggfärg med färgväljare
- Växla mellan yttre och inre skuggor
- Lägg till flera skugglager
- Välj från professionella förinställningar
- Förhandsgranska skugga i realtid
- Anpassa förhandsgranskningsstorlek
- Kopiera genererad kod
- Hantera flera lager
- Använd lagerkontroller