Bästa fria CSS skugggenerator för box
Visuellt bygga CSS-box-skugga med live förhandsvisning, infälld och ett andra lager - kopiera koden.
100% fri
Ingen registrering
Inget vattenmärke
✨
Gå Pro för de bästa AI-modellerna - bild, video och chatt - plus större uppladdningar, prioritet i kön och ingen väntan.
Uppgradera till Pro
Kärlek Best.Free? Dela den
Hur det fungerar
- Flytta skjutreglagena. Ställ in offset, oskärpa, spridning, färg och opacitet; växla infälld om du vill ha en inre skugga.
- Titta på förhandsgranskningen. Uppdateringar i liveboxen när du drar; lägg till ett andra lager i Avancerade alternativ för djup.
- Kopiera CSS. Tryck på Kopiera CSS och klistra in rutan-skugga regel direkt i ditt stilmall.
Om detta verktyg
Designa en box-skugga utan att gissa pixelvärden. Dra offset-X, offset-Y, oskärpa och sprida skjutreglage, välj en skugga färg och ratten i sin opacitet, och titta på en live förhandsvisning rutan uppdatering i realtid - sedan kopiera den exakta box-skugga CSS. Vänd inset växla för en inre skugga. De avancerade alternativen stapla en andra skugga lager, så att du kan bygga de mjuka, flerlagers skuggor som används på moderna kort och knappar. Allt körs i din webbläsare.
Vad folk använder det till
- Lägg till en mjuk fallskugga till kort och modal
- Skapa en inre (infälld) skugga för ingångar och brunnar
- Stack två lager för en realistisk, diffus skugga
- Tune offset och suddig för att matcha en design mockup
Vanliga frågor
Offset-X/Y flyttar skuggan horisontellt och vertikalt, oskärpa mjukar upp sin kant och sprider sig växer eller krymper hela skuggan innan oskärpa appliceras. Live-förhandsgranskningen visar varje förändring omedelbart.
Infällning drar skuggan inuti elementet istället för bakom det, vilket ger en intryckt look - användbar för ingångar och växlar. Vänd på insättaren för att växla.
Välj en färg, använd sedan opacitetsreglaget, verktyget ger ett rgba () värde så att skuggan smälter naturligt.
Ja. Öppna Avancerade alternativ för att aktivera ett andra skugglager med egen offset, suddig, färg och inset.
Nej. Generatorn körs helt i din webbläsare; skjutreglagena beräknar bara en CSS-sträng lokalt.
Helt gratis, inget konto och inga gränser - ett klient-side verktyg utan något att mäta.
Ja. Det körs i din webbläsare, så CSS Box Shadow Generator fungerar på telefoner och surfplattor samt skrivbord - det finns ingen app att installera.
Vanligtvis bara några sekunder för en typisk fil - CSS Box Shadow Generator börjar fungera när du ger det din ingång.
Det är obegränsat med användning av engångsartiklar, med ett generöst lock för rättvis användning som håller det snabbt för alla.
Alla moderna webbläsare - Chrome, Safari, Firefox och Edge. CSS Box Shadow Generator behöver ingenting installerat utanför webbläsaren du redan använder.