Generatore di box-shadow CSS
Crea una box-shadow muovendo i cursori e vedendo il risultato su una card. Sovrapponi fino a sei livelli per ombre più morbide e realistiche, usa inset per gli effetti premuti e parti da preset come morbida, fluttuante, bagliore o neumorfismo. Copia il CSS con un clic.
Come si usa
- Scegli un preset o regola scostamento, sfocatura, diffusione, colore e opacità dell'ombra.
- Aggiungi livelli con + e selezionane uno per modificarlo; cambia lo sfondo, il colore del riquadro e il raggio degli angoli per adattarli al tuo design.
- Copia il CSS e incollalo nella regola dell'elemento.
Domande frequenti
A cosa servono sfocatura e diffusione?
La sfocatura rende più morbido il bordo dell'ombra; con zero il bordo è netto. La diffusione ingrandisce l'ombra in tutte le direzioni prima della sfocatura, e una diffusione negativa la riduce, il che aiuta una grande ombra sfocata a restare sotto l'elemento.
Perché usare più livelli di ombra?
Le ombre reali sono più scure vicino all'oggetto e sfumano più lontano. Combinare un'ombra piccola e nitida con una più grande e morbida lo imita e sembra più naturale di un'ombra singola. Il primo livello dell'elenco viene disegnato sopra.
La box-shadow rallenta una pagina?
Non nell'uso normale. Sfocature molto grandi su molti elementi, o l'animazione dell'ombra stessa, possono pesare sulle prestazioni degli smartphone lenti; per animare, cambia invece l'opacità di uno pseudo-elemento che ha l'ombra.
🏷️ Generatore di meta tag
🖼️ Generatore Open Graph
🔗 Generatore di link UTM
🌈 Generatore di gradienti CSS