Mjuk CSS Box Shadow — Färdiggjord kod
Bygg CSS-box-skuggkod visuellt: skjutreglage för offset, oskärpa, spridning, färg med opacitet, infällt läge och upp till fyra lager med en liveförhandsvisning.
Resultat
Den här sidan öppnar box-skugggeneratorn förladdad med en mjuk skugga: ingen horisontell förskjutning, 8px ner, en generös 24px oskärpa och en låg 12% svart opacitet. Förhandsgranskningskortet renderar det omedelbart - tryck på valfri skjutreglage och CSS-raden följer i realtid.
Mjuka skuggor är arbetshästen för moderna gränssnitt. En stor oskärpa i kombination med låg opacitet lyfter ett kort från sidan utan att dra en hård kontur, vilket är anledningen till att de flesta designsystem håller sina höjdskuggor i exakt detta intervall istället för de täta, mörka skuggorna från tidig platt design.
Kopiera box-skugglinjen rakt in i din stilmall eller stapla upp till tre fler lager för en rikare höjd. Generatorn körs helt i din webbläsare - ingenting laddas upp någonstans.