Generatore di Ombre CSS
Progetta ombre box-shadow visivamente con anteprima dal vivo. Regola offset, sfocatura, espansione e colore, poi copia il CSS pronto all'uso istantaneamente.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
Come usare il Generatore di Ombre CSS
- Regola i cursori di offset X e Y per posizionare l'ombra rispetto all'elemento.
- Imposta il raggio di sfocatura per la morbidezza e il raggio di espansione per la dimensione dell'ombra.
- Scegli o digita un colore dell'ombra usando qualsiasi valore CSS valido (hex, rgba, hsla).
- Attiva ombra interna per effetti di ombra interiore.
- Copia il CSS box-shadow generato e incollalo direttamente nel tuo foglio di stile.
Informazioni sulle Ombre CSS
Le ombre aggiungono profondità e gerarchia visiva agli elementi dell'interfaccia. Sono una delle proprietà CSS più utilizzate nel web design moderno, applicate a card, pulsanti, modali e barre di navigazione.
Questo generatore offre pieno controllo visivo — ogni regolazione dei cursori aggiorna l'anteprima dal vivo istantaneamente così puoi mettere a punto l'aspetto esatto prima di copiare il codice. Il CSS generato usa la sintassi box-shadow standard e funziona in tutti i browser moderni.
Domande Frequenti
Cosa fa il raggio di espansione? ▼
Il raggio di espansione controlla quanto l'ombra si estende oltre o all'interno dell'elemento. I valori positivi la espandono verso l'esterno, quelli negativi la restringono verso l'interno.
Cos'è un'ombra interna? ▼
Un'ombra interna viene renderizzata all'interno dei limiti dell'elemento invece che all'esterno. È comunemente usata per effetti di pulsante premuto o profondità interna.
Posso usare valori rgba per il colore dell'ombra? ▼
Sì. Puoi digitare qualsiasi valore di colore CSS valido, inclusi rgba, hsla, codici esadecimali o nomi di colore.
Il CSS è pronto per la produzione? ▼
Sì. Il CSS generato usa la sintassi box-shadow standard compatibile con tutti i browser moderni.