Generator CSS Box Shadow & Border Radius

Generator CSS Box Shadow & Border Radius

🎨 Generator gratuit CSS de box-shadow și border-radius cu previzualizare live. Creează umbre frumoase, colțuri rotunjite și efecte UI moderne. Cod gata de copiat și lipit pentru web design.

Proprietatea Box Shadow

Proprietatea CSS box-shadow adaugă efecte de umbră în jurul cadrului unui element. Poți seta mai multe efecte separate prin virgule. O umbră este descrisă de deplasările X și Y față de element, raza de estompare și de extindere, precum și culoarea.

Sintaxă: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Parametrii umbrei

• Deplasare X (orizontal): valori pozitive mută umbra spre dreapta, negative spre stânga
• Deplasare Y (vertical): valori pozitive mută umbra în jos, negative în sus
• Rază de estompare: valori mai mari creează mai mult blur. 0 înseamnă umbră clară
• Rază de extindere: valori pozitive extind umbra, negative o micșorează
• Culoare: orice valoare de culoare CSS (hex, rgb, rgba, hsl)
• Inset: transformă umbra într-una interioară, în loc de exterioară

Proprietatea Border Radius

Proprietatea border-radius rotunjește colțurile marginii exterioare a unui element. Poți seta o singură rază pentru colțuri circulare sau două raze pentru colțuri eliptice.

Sintaxă: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Cazuri de utilizare comune

• Carduri: umbră subtilă (0 4px 6px rgba(0,0,0,0.1)) cu rază medie (8px)
• Butoane: umbră colorată potrivită culorii butonului pentru efect de profunzime
• Modale: umbră mare (0 20px 25px rgba(0,0,0,0.15)) pentru a părea „plutitoare”
• Imagini: avatare circulare (border-radius: 50%) sau miniaturi rotunjite (8–16px)
• Câmpuri de input: umbră inset pentru starea apăsat/focus
• Design neumorfic: multiple umbre (luminoasă și închisă) cu fundal potrivit

Bune practici pentru umbre

• Folosește umbre subtile: 10–20% opacitate este de obicei suficient pentru profunzime
• Y-offset > X-offset: imită lumina naturală de sus
• Blur mai mare pentru „elevație”: mai mult blur = pare mai sus de pe pagină
• Potrivește culoarea umbrei: folosește culoarea elementului la opacitate mică pentru coeziune
• Performanță: evită animarea box-shadow; folosește opacity sau transform

Stiluri populare de umbră

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Modele de Border Radius

• Niciunul (0px): colțuri ascuțite, aspect minimalist modern
• Mic (4px): rotunjire subtilă pentru inputuri și butoane
• Mediu (8px): standard pentru carduri și containere
• Mare (16px+): design prietenos, accesibil
• Pastilă (999px sau 50%): capete rotunjite pentru etichete și badge-uri
• Cerc (50%): avatare, butoane icon (necesită element pătrat)

Tehnici avansate

• Umbre multiple: combină umbre pentru efecte stratificate
• Efect Glow: 0 0 20px [culoare] fără offset
• Neumorfism: umbră deschisă sus-stânga, umbră închisă jos-dreapta
• Inel de focus: umbră colorată pentru accesibilitate (0 0 0 3px rgba(culoare,0.5))
• Efect 3D: umbre multiple cu offset și blur crescătoare

Suport în browsere

Box-shadow și border-radius sunt suportate în toate browserele moderne. Pentru IE8 și mai vechi, se pot folosi prefixe (-webkit-box-shadow, -moz-box-shadow), însă astăzi este rar necesar.

💡 Sfat: Pentru efecte hover, nu anima box-shadow direct deoarece este costisitor. În schimb, creează umbra pe un pseudo-element (::before sau ::after) și animează-i opacitatea. Obții același efect vizual cu performanță mult mai bună, mai ales pe dispozitive mobile!