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

Indsat CSS Box Shadow — Færdiglavet 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-generatoren med det indsatte afkrydsningsfelt allerede markeret, så skyggen tegnes inde i elementet i stedet for bagved det. Preview-kortet viser den sunkne effekt på én gang, og hver skyder bliver ved med at opdatere CSS-linjen live.

Indsatte skygger er, hvordan CSS forfalsker dybde, der går indad: Trykte knaptilstande, søgefelter og inputbrønde, fremskridtslinje-troughs og indgraverede paneler er alle afhængige af dem. Fordi skyggen omslutter den indvendige kant, opfører sløring og spredning sig lidt anderledes end i en normal skygge - skyderne her lader dig mærke forskellen med det samme.

Når det sunkne look er rigtigt, kopier boksen-skygge-linjen ind i dit stylesheet. Du kan også kombinere et indsat lag med almindelige ydre lag - tilføj et andet lag og fjern markeringen af ​​indsat på det for at blande begge dele i én erklæring.

🛡️
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.