Generatore box-shadow
Regola offset, sfocatura, espansione, colore e trasparenza con gli slider: l'ombra si aggiorna in tempo reale e il codice CSS è pronto da copiare.
Come si legge la sintassi di box-shadow
I valori seguono sempre lo stesso ordine: offset orizzontale, offset verticale, raggio di
sfocatura, raggio di espansione e colore. L'offset sposta l'ombra rispetto all'elemento, la
sfocatura la rende morbida, l'espansione la ingrandisce (o la rimpicciolisce, con valori
negativi) prima della sfocatura. La parola chiave inset porta l'ombra all'interno
del riquadro, utile per effetti "incassati" su input e pulsanti premuti.
I trucchi per un'ombra realistica
Le ombre convincenti sono quasi trasparenti: resta tra il 10% e il 30% di opacità e aumenta la sfocatura invece di scurire il colore. Mantieni l'offset Y maggiore dell'offset X, perché nella realtà la luce arriva dall'alto. Per profondità extra puoi combinare più ombre separandole con la virgola: una piccola e nitida vicino all'elemento, una grande e diffusa più lontana.