Generator box-shadow CSS

Exemple de box-shadow

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Umbră subtilă Abia se vede; desparte cardul de fundal fără să atragă atenția.

.element {
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.12),
    0 1px 2px -1px rgba(15, 23, 42, 0.12);
}

Card plutitor Două straturi: unul mare și moale, unul mic și clar, ca la lumina reală.

.element {
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25),
    0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

Umbră colorată Umbra în culoarea butonului îl face să pară luminos.

.element {
  box-shadow: 0 10px 30px -5px rgba(124, 58, 237, 0.5);
}

Strălucire Fără deplasare și cu extindere pozitivă, umbra devine un halou.

.element {
  box-shadow: 0 0 40px 4px rgba(59, 130, 246, 0.6);
}

Câmp adâncit (inset) Umbra interioară face elementul să pară apăsat, ca un câmp de text.

.element {
  box-shadow: inset 0 2px 8px 0 rgba(15, 23, 42, 0.2);
}

Neumorfism O umbră închisă și una albă, în direcții opuse, pe un fundal de aceeași culoare cu elementul.

.element {
  box-shadow: 9px 9px 16px 0 #a3b1c6,
    -9px -9px 16px 0 #ffffff;
}

Contur fals Umbre fără estompare: arată ca un border dublu, dar nu ocupă loc în pagină.

.element {
  box-shadow: 0 0 0 3px #2563eb,
    0 0 0 6px rgba(37, 99, 235, 0.25);
}

Retro (brutalist) O umbră plină, fără estompare, deplasată în diagonală.

.element {
  box-shadow: 8px 8px 0 0 #0f172a;
}

Cum folosești generatorul de box-shadow

Pornește de la un exemplu: umbră subtilă, card plutitor, neumorfism, contur fals.
Modifică deplasarea pe x și y, estomparea (blur), extinderea (spread) și culoarea.
Apasă + Umbră pentru încă un strat. Umbrele mai multe, suprapuse, arată mai natural decât una singură.

Sintaxa box-shadow

Ordinea valorilor este: deplasare orizontală, deplasare verticală, estompare, extindere, culoare. Cuvântul inset la început mută umbra în interiorul elementului.

.card {
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28);
}
.camp-text {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Umbre cu mai multe straturi

Straturile se despart prin virgulă; primul este desenat deasupra. O umbră mică și clară plus una mare și estompată imită felul în care cade lumina în realitate.

.card {
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.12),
    0 16px 32px -8px rgba(15, 23, 42, 0.18);
}

Extinderea negativă (de exemplu -8px) micșorează umbra față de element, ca să nu se vadă pe laterale. O umbră cu blur 0 și extindere pozitivă arată ca un contur care nu ocupă spațiu în pagină.

Întrebări frecvente

Care e diferența dintre box-shadow și filter: drop-shadow()?

box-shadow urmează dreptunghiul elementului (cu colțurile rotunjite). drop-shadow() urmează forma reală a conținutului, de exemplu pixelii unei imagini PNG transparente.

Umbra încetinește pagina?

Umbrele statice nu contează. Animarea directă a box-shadow pe multe elemente poate sacada; mai eficient este să animezi opacity pe un pseudo-element care are deja umbra.