Card Shadow CSS — Subtil box-shadow-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 förinställningen för box-shadow-generatorn till en klassisk kortskugga: 2px ner, 8px oskärpa, 15% svart opacitet. Det är medvetet tyst - tillräckligt för att separera ett kort från sidan utan att meddela sig själv - och förhandsvisningen visar exakt hur tyst.
Detta intervall motsvarar de lägsta höjdstegen i de flesta designsystem: listkort, rullgardinsmenyer, popovers och tabellrader vid hovring. Om du behöver ett starkare lyft för modaler eller flytande paneler, höj Y-förskjutningen och suddig samman – de bör växa i proportion för att hålla ljuskällan trovärdig.
Kopiera box-skugglinjen till dina komponentstilar, eller duplicera den som ett andra lager med en tätare oskärpa för att lägga till kantdefinition. Verktyget är gratis och körs helt i din webbläsare.