6XC

Generatore di Ombre CSS (Box Shadow)

Progetta una box-shadow visivamente — offset, sfocatura, espansione, colore, opacità e inset — con anteprima dal vivo.

813 visualizzazioni

La proprietà box-shadow

Sintassi: box-shadow: x y sfocatura espansione colore. Gli offset spostano l'ombra, la sfocatura ne ammorbidisce il bordo, l'espansione la ingrandisce o restringe, e il colore di solito porta un valore alfa (ad esempio rgba(0,0,0,0.15)) per un effetto realistico. Aggiungi inset per disegnare l'ombra all'interno del box. Le ombre morbide a bassa opacità con un piccolo offset y risultano le più naturali.

Domande Frequenti

Qual è la differenza tra sfocatura ed espansione?

La sfocatura ammorbidisce il bordo dell'ombra senza cambiarne le dimensioni; l'espansione allarga (o con valori negativi restringe) l'ombra in ogni direzione prima che venga applicata la sfocatura.

Come creo un'ombra elegante e moderna?

Tieni x a 0, y piccolo (2-8px), sfocatura generosa (10-30px) e opacità bassa (0,08-0,2). Sovrapporre due ombre — una stretta e una ampia — aggiunge profondità.

Strumenti Simili

Generatore di Gradienti CSS Progetta gradienti CSS lineari, radiali e conici con anteprima dal vivo e copia il codice. Genera Generatore di Border Radius CSS Arrotonda ogni angolo singolarmente o tutti insieme, in px o %, con anteprima dal vivo e CSS copiabile. Genera Generatore di Ombra del Testo CSS Progetta un text-shadow con offset, sfocatura, colore e opacità — anteprima dal vivo su testo di esempio. Genera Generatore CSS Glassmorphism Progetta un effetto vetro (glassmorphism) con anteprima dal vivo — regola sfocatura, trasparenza, tinta e bordo, poi copia il CSS. Genera