CSS-boxskugggenerator — Visuell Skuggbyggare Gratis

CSS-boxskuggor lägger till djup, elevation och visuell hierarki i ditt UI — men syntaxen har fem parametrar som är svåra att visualisera från kod ensam. Vår boxskugggenerator ger skjutreglage för offset, blur, spread och färg med levande förhandsvisning och produktionsklar CSS du kan kopiera med ett klick.

Vad är en CSS-boxskugga?

CSS-egenskapen box-shadow lägger till skuggeffekter runt ett elements ram. Den accepterar parametrar för horisontell offset, vertikal offset, blurradie, spridningsradie och färg. Flera skuggor kan läggas i lager för realistiska effekter. Nyckelordet inset skapar inre skuggor.

Hur använder du boxskugggeneratorn?

Justera horisontella och vertikala offsetreglage för att positionera skuggan. Ange blurradien för mjukhet och spridningsradien för storlek. Välj en skuggfärg och justera dess opacitet. Lägg till flera skuggor för djup — växla inset för inre skuggor. Kopiera CSS:en.

Bästa praxis

Använd subtila skuggor (låg opacitet, liten offset) för de flesta UI-element. Dramatiska skuggor bör reserveras för modaler och överlager. Lägg 2–3 skuggor i lager för realistiskt djup: en tät skugga för kanten och en mjuk för omgivande ljus. Matcha skuggriktningen i hela ditt UI.