Generator CSS Box Shadow
Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant.
box-shadow: —;
Totul se actualizează live în browserul tău — fără încărcări, fără înregistrare, complet gratuit.
Despre Generator CSS Box Shadow
Generatorul de umbre CSS (Box Shadow) îți permite să proiectezi umbre vizual, în loc să ghicești valori în cod. Trage cursoarele pentru decalajul orizontal și vertical, raza de estompare, raza de extindere, culoare și opacitate — cu un comutator pentru umbră interioară — și urmărește un element real actualizându-se live. Când arată bine, copiază CSS-ul gata de lipit dintr-un clic.
Umbrele din interfețele moderne rareori au un singur strat. Acest generator acceptă straturi de umbră suprapuse: adaugă, dublează, ascunde sau elimină straturi și previzualizează fie stratul selectat singur, fie toate straturile combinate. Suprapunerea unei umbre întunecate și înguste sub una largă și moale este modul în care cardurile și butoanele elegante capătă adâncime.
Poți de asemenea stiliza elementul de previzualizare — culoarea cutiei, raza bordurii și fundalul canvasului — astfel încât umbra să fie evaluată într-un context realist, inclusiv pe suprafețe întunecate. Pornește de la un preset, apasă „Randomizează stratul” pentru inspirație și resetează oricând vrei o pagină curată. Totul rulează în browser.
Cum să utilizați Generator CSS Box Shadow
- Ajustează cursoarele pentru decalajul orizontal, decalajul vertical, estompare, extindere, culoare și opacitate, și activează „Umbră interioară” dacă vrei o umbră spre interior.
- Dă clic pe „Adaugă strat” sau „Dublează stratul” pentru a suprapune umbre, și comută modul de previzualizare între „Acest strat” și „Toate straturile” pentru a ajusta fiecare în parte.
- Ajustează elementul și canvasul — culoarea cutiei, raza bordurii și fundalul — astfel încât previzualizarea să corespundă design-ului tău real.
- Aplică un preset sau folosește „Randomizează stratul” dacă vrei un punct de plecare în loc de cursoare goale.
- Copiază regula CSS completă (sau doar valoarea) și lipeste-o în foaia ta de stiluri.