Box Shadow-generator

Designa skuggor med live-återkoppling

En väljusterad box-shadow kan få ett gränssnitt att kännas lagerindelat, klickbart och polerat. En dåligt justerad skugga kan få samma gränssnitt att se grumligt eller inkonsekvent ut. Den här generatorn ger dig direkt kontroll över de värden som spelar roll: horisontell förskjutning, vertikal förskjutning, oskärpa, spridning, färg, opacitet och inset-läge. När du flyttar varje reglage uppdateras förhandsvisningen och CSS-utdata direkt, vilket gör det lättare att hitta ett naturligt resultat än att skriva siffror för hand.

Utdata är en vanlig CSS-deklaration, så den fungerar för kort, modaler, knappar, rullgardinsmenyer, navigeringsfält och alla andra element som accepterar box-shadow. Inga bilder skapas och ingenting laddas upp. Webbläsaren tillämpar helt enkelt skuggan på förhandsvisningselementet och kopierar den färdiga CSS:en när du är redo.

Förstå förskjutning, oskärpa och spridning

Horisontell och vertikal förskjutning flyttar skuggan bort från elementet. En positiv vertikal förskjutning antyder ofta att objektet är upphöjt över sidan, medan en skugga med liten förskjutning kan kännas som en glöd. Oskärpan styr mjukheten: låg oskärpa ger en hård, grafisk kant, medan högre oskärpa ger en mer realistisk, diffus skugga. Spridningen ändrar skuggans storlek innan oskärpan tillämpas. Positiv spridning gör skuggan bredare och tyngre; negativ spridning drar ihop den så att oskärpan känns mer subtil.

Använda skuggor i ett designsystem

Skuggor fungerar bäst när de är konsekventa. Istället för att hitta på en ny skugga för varje komponent kan du skapa en liten höjdskala: en subtil skugga för kort, en starkare för popovers och en fokuserad för modaler. Testa skuggor på både ljusa och mörka ytor, eftersom samma opacitet kan kännas för stark mot en blek bakgrund och för svag mot en mörk. Inset-skuggor är användbara för nedtryckta lägen, nedsänkta fält och infällda paneler, men bör användas sparsamt så att kontrollerna förblir tydliga och tillgängliga.