Generatore CSS Box Shadow & Border Radius

Generatore CSS Box Shadow & Border Radius

🎨 Generatore gratuito di CSS box-shadow e border-radius con anteprima dal vivo. Crea ombre bellissime, angoli arrotondati ed effetti UI moderni. Codice pronto da copiare e incollare per il web design.

Proprietà Box Shadow

La proprietà CSS box-shadow aggiunge effetti ombra attorno alla cornice di un elemento. Puoi impostare più effetti separati da virgole. Un’ombra è descritta da offset X e Y rispetto all’elemento, raggio di sfocatura e di diffusione, e colore.

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

Parametri dell’ombra

• Offset X (orizzontale): valori positivi spostano l’ombra a destra, negativi a sinistra
• Offset Y (verticale): valori positivi spostano l’ombra verso il basso, negativi verso l’alto
• Raggio di sfocatura: valori più alti creano più sfocatura. 0 = ombra netta
• Raggio di diffusione: valori positivi espandono l’ombra, negativi la riducono
• Colore: qualsiasi valore colore CSS (hex, rgb, rgba, hsl)
• Inset: trasforma l’ombra in ombra interna invece che esterna

Proprietà Border Radius

La proprietà border-radius arrotonda gli angoli del bordo esterno di un elemento. Puoi impostare un singolo raggio per ottenere angoli circolari, o due raggi per creare angoli ellittici.

Sintassi: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Casi d’uso comuni

• Card: ombra delicata (0 4px 6px rgba(0,0,0,0.1)) con raggio medio (8px)
• Pulsanti: ombra colorata abbinata al colore del pulsante per effetto profondità
• Modali: ombra grande (0 20px 25px rgba(0,0,0,0.15)) per apparire sospesi
• Immagini: avatar circolari (border-radius: 50%) o miniature arrotondate (8–16px)
• Campi input: ombra inset per stato premuto/focus
• Design neumorfico: ombre multiple (chiara e scura) con sfondo abbinato

Best practice per le ombre

• Usa ombre leggere: 10–20% di opacità è spesso sufficiente per la profondità
• Offset Y > offset X: imita la luce naturale dall’alto
• Più blur per più elevazione: più sfocatura = sembra più sollevato dalla pagina
• Abbina il colore dell’ombra: usa il colore dell’elemento a bassa opacità per coerenza
• Prestazioni: evita di animare box-shadow, usa invece opacity o transform

Stili di ombra popolari

• 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)

Pattern di Border Radius

• Nessuno (0px): angoli netti, look moderno minimalista
• Piccolo (4px): arrotondamento leggero per input e pulsanti
• Medio (8px): standard per card e contenitori
• Grande (16px+): design amichevole e “morbido”
• Pill (999px o 50%): estremità arrotondate per tag e badge
• Cerchio (50%): avatar e pulsanti icona (richiede elemento quadrato)

Tecniche avanzate

• Ombre multiple: combina ombre per effetti stratificati
• Effetto glow: 0 0 20px [colore] senza offset
• Neumorfismo: ombra chiara in alto a sinistra, ombra scura in basso a destra
• Focus ring: ombra colorata per accessibilità (0 0 0 3px rgba(colore,0.5))
• Effetto 3D: ombre multiple con offset e blur crescenti

Supporto browser

Box-shadow e border-radius sono supportati in tutti i browser moderni. Per IE8 e precedenti, usa i prefissi vendor (-webkit-box-shadow, -moz-box-shadow), anche se oggi raramente è necessario.

💡 Consiglio pro: per gli effetti hover, non animare box-shadow direttamente perché è costoso. Invece, crea l’ombra su un pseudo-elemento (::before o ::after) e anima la sua opacità. Otterrai lo stesso effetto visivo con prestazioni molto migliori, soprattutto su dispositivi mobili!