DevTulz Online

Generator CSS Box Shadow

Fundal

Ce este CSS Box Shadow?

Proprietatea CSS box-shadow adaugă efecte de umbră în jurul cadrului unui element. Umbrele pot fi decalate, estompate, răspândite, colorate și setate ca inset (umbră interioară). Mai multe umbre separate prin virgulă pot fi suprapuse pentru efecte bogate. Acest generator vă permite să construiți vizual umbre complexe cu mai multe straturi și să copiați CSS-ul gata de lipit în clipboard.

Cum se folosește Generatorul Box Shadow

  1. Ajustați cursoarele pentru Offset X/Y, Blur și Spread pentru a poziționa și forma umbra.

  2. Faceți clic pe mostra de culoare pentru a alege o culoare pentru umbră și utilizați cursorul Opacity pentru transparență.

  3. Comutați 'Inset' pentru a crea o strălucire interioară sau un efect apăsat.

  4. Faceți clic pe '+ Adaugă strat' pentru a suprapune mai multe umbre.

  5. Copiați CSS-ul generat și lipiți-l în foaia de stiluri.

Întrebări Frecvente

Care este diferența dintre box-shadow și filtrul drop-shadow? box-shadow adaugă umbre în jurul cutiei de margine dreptunghiulare a elementului și suportă umbre interioare. Filtrul CSS: drop-shadow() se aplică formei vizuale a elementului (inclusiv transparență), făcând-o să urmeze contururi non-dreptunghiulare, cum ar fi PNG-uri cu funduri transparente.

Cum cresc un efect de ridicare a cardului Material Design? Stivuiți două umbre box: o umbră ambiantă moale (estompare mare, opacitate scăzută, ușor răspândită) și o umbră cheie (estompare mai mică, opacitate mai mare, offset direcțional). De exemplu: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Box-shadow afectează aspectul paginii? Nu. box-shadow nu afectează dimensiunea sau poziția elementului în fluxul documentului. Spre deosebire de outline, nu ocupă spațiu de aspect și nu va deplasa alți elemente.

Pot anima box-shadow? Da. box-shadow se poate anima cu transițiile și animațiile CSS. Pentru performanță, preferați animația box-shadow doar atunci când este necesar — browserele nu pot accelera schimbările box-shadow pe GPU la fel de eficient ca transform sau opacity.

Keywords: generator CSS box shadow, box-shadow CSS, instrument umbră CSS, CSS drop shadow, umbră interioară, umbră multi-strat, CSS shadow online