⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

Card Shadow CSS — Subtil box-shadow-kode

Byg CSS box-shadow kode visuelt: skydere til offset, sløring, spredning, farve med opacitet, indsat tilstand og op til fire lag med en live preview.

0px
4px
12px
0px
0.25
Behandler... 0%

Resultat

Denne side åbner box-shadow generator-forudindstillingen til en klassisk kortskygge: 2px ned, 8px sløring, 15% sort opacitet. Det er bevidst stille - nok til at adskille et kort fra siden uden at annoncere sig selv - og forhåndsvisningen viser præcis, hvor stille.

Dette interval svarer til de laveste højdetrin i de fleste designsystemer: listekort, rullemenuer, popovers og tabelrækker ved svævning. Hvis du har brug for et stærkere løft til modaler eller flydende paneler, skal du hæve Y-forskydningen og sløre sammen - de bør vokse i forhold til at holde lyskilden troværdig.

Kopier kasse-skygge-linjen ind i dine komponentstile, eller dupliker den som et andet lag med en strammere sløring for at tilføje kantdefinition. Værktøjet er gratis og kører udelukkende i din browser.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Skydere til X/Y offset, sløring og spredning med live pixel udlæsninger plus en farvevælger med en separat opacitetsskyder.
  • Indsæt afkrydsningsfelt og en lagliste: Tilføj, vælg og fjern op til fire skyggelag.
  • Kopierbar box-shadow CSS-linje, der dækker alle lag, vist på en lys eller mørk baggrund, der kan skiftes.

Vigtige fordele

✓ Hver skyder opdaterer preview-kortet og CSS-linjen øjeblikkeligt - ingen gæt på, hvordan 0 8px 24px rgba(...) rent faktisk vil se ud.
✓ Op til fire skyggelag lader dig bygge realistiske højder og neumorfe effekter, som enkeltskyggegeneratorer ikke kan udtrykke.
✓ Skiftet mellem lys og mørk baggrund viser, hvordan din skygge læser på begge temaer, før du sender den.

Brug Cases

  • • Indtast en blød elevationsskygge for et produktkort ved at trække skydere i stedet for at redigere rgba()-værdier blindt.
  • • Byg den to-lags lys/mørke neumorfi-effekt, og kopier hele flerlags box-skygge-linjen med et enkelt klik.
  • • Tjek på den mørke forhåndsvisningsbaggrund, at din skygge stadig læser i mørk tilstand, før du sender temaet.