CSS Box Shadow-generator
Skapa skiktade CSS box-shadows med realtidsskjutreglage för förskjutning, oskärpa, spridning, färg, opacitet och infällning — förhandsgranska på ett riktigt element och kopiera CSS omedelbart.
box-shadow: —;
Allt uppdateras live i din webbläsare — inga uppladdningar, ingen registrering, helt gratis.
Om CSS Box Shadow-generator
CSS Box Shadow-generatorn låter dig designa box-shadows visuellt istället för att gissa värden i kod. Dra reglagen för horisontell och vertikal förskjutning, oskärperadie, spridningsradie, färg och opacitet — med en inset-omkopplare — och se ett verkligt element uppdateras live. När det ser rätt ut kopierar du den färdiga CSS-koden med ett klick.
Moderna UI-skuggor är sällan ett enda lager. Den här generatorn stöder staplade skugglager: lägg till, duplicera, dölj eller ta bort lager, och förhandsgranska antingen det valda lagret ensamt eller alla lager tillsammans. Att lägga en tät mörk skugga under en mjuk bred är hur polerade kort och knappar får sitt djup.
Du kan även styla själva förhandsgranskningselementet — boxfärg, hörnradie och canvasbakgrund — så att skuggan bedöms mot en realistisk kontext, inklusive mörka ytor. Börja med en förinställning, klicka på "Slumpa lager" för inspiration, och återställ när du vill ha en ren tavla. Allt körs i din webbläsare.
Så använder du CSS Box Shadow-generator
- Justera reglagen för horisontell förskjutning, vertikal förskjutning, oskärpa, spridning, färg och opacitet, och slå på "Inset shadow" om du vill ha en inre skugga.
- Klicka på "Lägg till lager" eller "Duplicera lager" för att stapla skuggor, och växla förhandsgranskningsläget mellan "Detta lager" och "Alla lager" för att finjustera var och en.
- Justera elementet och canvasen — boxfärg, hörnradie och bakgrund — så att förhandsgranskningen matchar din verkliga design.
- Använd en förinställning eller klicka på "Slumpa lager" om du vill ha en utgångspunkt istället för tomma reglage.
- Kopiera hela CSS-regeln (eller bara värdet) och klistra in den i ditt stilmallsdokument.