Generatore box-shadow: a cosa serve
La proprietà box-shadow richiede cinque valori in un ordine preciso, e la differenza tra sfocatura e spread non è affatto ovvia guardando solo la sintassi. Questo generatore offre slider e anteprima dal vivo, oltre alla possibilità di sovrapporre più ombre — ed è così che si costruisce davvero una profondità convincente.
Generatore box-shadow: come si usa
- Regola l'offset orizzontale e verticale per impostare la direzione della luce.
- Alza la sfocatura per un bordo morbido e lo spread per ingrandire o restringere l'intera ombra.
- Scegli colore e opacità, oppure attiva inset per un'ombra interna.
- Sovrapponi altre ombre per una profondità realistica, poi copia il CSS.
Domande frequenti
Che differenza c'è tra sfocatura e spread?
La sfocatura ammorbidisce il bordo dell'ombra senza cambiarne la dimensione. Lo spread ingrandisce o restringe la forma dell'ombra prima della sfocatura, quindi uno spread negativo con una sfocatura ampia produce un'ombra sottile e discreta.
Come ottengo un'ombra dall'aspetto realistico?
Sovrapponendone due o tre. Un'ombra stretta e più scura vicino all'elemento più una ampia e tenue più lontana imitano la luce ambientale e diretta molto meglio di un'unica ombra pesante.
Quando conviene usare inset?
Per elementi che devono apparire incassati — pulsanti premuti, campi di input e pannelli rientrati. L'ombra viene disegnata dentro il border box invece che fuori.
Le box-shadow rallentano le prestazioni?
Raggi di sfocatura ampi su molti elementi possono costare tempo di rendering, specialmente durante lo scroll. Se diventa un problema, promuovi l'elemento a un layer separato o riduci il raggio di sfocatura.