Skapa vackra CSS-boxskuggor utan ansträngning
Skapa fantastiska boxskuggor med vårt intuitiva gränssnitt. Kopiera CSS-koden och använd den i dina projekt direkt.
Preview
Box skugga
Anpassa mig
CSS-utdata
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
Skugga kontroller
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
Mjuk skugga
Medium Skugga
Tung skugga
Inre skugga
Skarp diagonal
Kontur glöd
Dubbel skugga
Lyft effekt
Så här använder du
Grundläggande kontroller
- JusteraHorisontell förskjutningför att flytta skuggan åt vänster eller höger
- JusteraVertikal förskjutningför att flytta skuggan uppåt eller nedåt
- ÖkaOskärpa radieför att göra skuggan mjukare
- Use Sprid radieför att öka eller minska den totala storleken på skuggan
- ÄndraColor and OpacitySå här anpassar du skuggans utseende
Avancerade funktioner
- Enable Infälld skuggaSå här skapar du en inre skuggeffekt
- Use Flera skuggorför mer komplexa effekter
- Spara och laddaPresetsför snabb åtkomst till dina favoritskuggor
- Click Slumpmässig skuggaför inspiration
- Kopiera den genererade CSS-koden och klistra in den i ditt projekt
Related Tools
Sass till CSS Converter
Omvandla din Sass-kod till CSS. Snabbt, enkelt och säkert.
Mindre till CSS Converter
Omvandla din Less-kod till CSS. Snabbt, enkelt och säkert.
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Skapa vacker CSS-textgradient utan ansträngning
Skapa fantastiska övertoningstexteffekter för din webbplats
Reaktiv energiomvandlare
Omvandla reaktiv energi mellan olika enheter med precision och lätthet
CSS Cubic Bezier Generator
Skapa CSS Cubic Bezier Generator underlättande funktioner