CSS-skuggenerator
Vad är CSS-skuggenerator
En CSS-skuggenerator låter dig bygga en box-shadow visuellt och kopiera exakt CSS. Ställ in den horisontella och vertikala förskjutningen, oskärpans radie, spridningen och skuggans färg med dess opacitet, och se förhandsvisningen uppdateras medan du drar i varje reglage. Du kan stapla flera skuggor på samma element och växla valfritt lager till inre, så att utdatarutan alltid visar en färdig box-shadow-deklaration att klistra in.
Så använder du
- Dra i förskjutningsreglagen för att flytta skuggan i sidled och i höjdled.
- Ställ in oskärpans radie för en mjuk kant och spridningen för att förstora eller förminska skuggan.
- Välj skuggans färg, justera opaciteten och slå på inre för en skugga på insidan.
- Lägg till fler lager om du behöver och kopiera den genererade CSS-koden från utdatarutan.
När du använder det
Behöver du en diskret kortskugga som ser modern ut i stället för hård? Sätt förskjutningen till 0px och 10px, 20px oskärpa, ingen spridning och svart färg med 25% opacitet, kopiera sedan box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); direkt in i din stilmall. Lika behändigt för knappars hover-lägen, djup i lager eller en inre skugga som får ett inmatningsfält att se intryckt ut.
Vanliga frågor
Vad betyder värdena i box-shadow?
I ordning är de den horisontella förskjutningen, den vertikala förskjutningen, oskärpans radie, spridningen och färgen. Positiva förskjutningar skjuter skuggan åt höger och nedåt, oskärpan mjukar upp kanten, och spridningen förstorar eller förminskar hela skuggan innan den suddas ut.
Vad gör spridningsvärdet?
Spridningen ändrar skuggans storlek innan någon oskärpa appliceras. Ett positivt värde gör skuggan större än elementet, och ett negativt drar in den, vilket är användbart för tajta skuggor som bara tittar fram på en sida.
Kan jag stapla mer än en skugga?
Ja. Lägg till så många lager du vill och varje blir en kommaseparerad skugga i samma box-shadow-regel. Att stapla en mjuk bred skugga under en tätare och närmare är ett vanligt sätt att få realistiskt djup.
Vad är en inre skugga?
En inre skugga ritas inuti elementet i stället för bakom det, så rutan ser intryckt eller nedsänkt ut. Slå på inre på valfritt lager för att växla, vilket fungerar bra för inmatningsfält och intryckta knappar.
Kan jag dela verktyget med mina värden ifyllda?
Ja. Webbadressen uppdateras automatiskt medan du justerar reglagen. Kopiera den från adressfältet eller använd Dela-knappen, så ser alla som öppnar länken exakt din skugga redo att användas.
Relaterade verktyg
Bildförhållande Kalkylator
Räkna ut bildförhållandet, hitta saknad bredd eller höjd och ändra storlek på bilder och video utan att förvränga proportionerna. Gratis.
Streckkodsgenerator
Generera EAN-13- eller Code 128-streckkoder online. Ange ditt nummer eller text, ladda ner som SVG eller PNG. Gratis, ingen registrering behövs.
Base64-avkodare
Avkoda Base64-strängar till vanlig text direkt i din webbläsare. Stöder fullständig Unicode-utdata inklusive emojis. Gratis Base64-avkodare online.