Card Shadow CSS — Subtil box-shadow-kode
Bygg CSS-boksskyggekode visuelt: glidebrytere for forskyvning, uskarphet, spredning, farger med opasitet, innfelt modus og opptil fire lag med en direkte forhåndsvisning.
Resultat
Denne siden åpner boksskyggegeneratorens forhåndsinnstilling til en klassisk kortskygge: 2px ned, 8px uskarphet, 15% svart opasitet. Det er bevisst stille – nok til å skille et kort fra siden uten å kunngjøre seg selv – og forhåndsvisningen viser nøyaktig hvor stille.
Dette området tilsvarer de laveste høydetrinnene i de fleste designsystemer: listekort, rullegardinmenyer, popovers og tabellrader ved sveving. Hvis du trenger et sterkere løft for modaler eller flytende paneler, hev Y-forskyvningen og uskarp sammen – de bør vokse proporsjonalt for å holde lyskilden troverdig.
Kopier boks-skyggelinjen inn i komponentstilene dine, eller dupliser den som et andre lag med en tettere uskarphet for å legge til kantdefinisjon. Verktøyet er gratis og kjører helt i nettleseren din.