Generatore di ombre box-shadow

Gli scostamenti orizzontale e verticale spostano l'ombra a destra/sinistra e verso il basso/alto rispetto all'elemento; il raggio di sfocatura ammorbidisce il bordo (0 è un bordo netto, valori più alti lo ammorbidiscono); e il raggio di espansione ingrandisce o riduce la dimensione dell'ombra prima che venga applicata la sfocatura. Un'espansione negativa restringe l'ombra, utile per sollevamenti delicati.

Aggiungi un altro livello: il CSS permette di sovrapporre un numero illimitato di ombre su uno stesso elemento separandole con le virgole. Il primo livello dell'elenco viene disegnato sopra. Sovrapporre un'ombra stretta e scura a una larga e morbida è un modo comune per ottenere un effetto di profondità realistico.

Attiva «Interna» per disegnare l'ombra all'interno del box del bordo dell'elemento invece che all'esterno, così la superficie sembra premuta o incassata. Puoi combinare livelli interni ed esterni sullo stesso elemento.

No. Tutto funziona nel tuo browser: l'anteprima e il CSS generato vengono calcolati localmente e nulla di ciò che regoli viene inviato a un server. Copia il codice e incollalo direttamente nel tuo foglio di stile.