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
Skapa perfekta Flexbox-layouter
Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.
Stylus till CSS-omvandlare
Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.
SCSS till CSS-omvandlare
Omvandla din SCSS-kod till CSS. Snabbt, enkelt och säkert.
Hex till Oktal
Konvertera hexadecimala tal till oktala utan ansträngning
Omvandlare av ytenhet
Konvertera mellan olika ytenheter med precision och lätthet
SHA-2 Hash-kalkylator
Generera SHA-2-hashvärden snabbt och enkelt