Generatore Box Shadow
Crea effetti ombra CSS visivamente con controlli intuitivi. Regola blur, spread, colore e offset. Copia il codice CSS pronto per l'uso.
Anteprima
Livelli ()
Preset
Livello
Codice CSS
Metodo e limiti
Ogni livello scrive X, Y, sfocatura e espansione in pixel, poi RGBA e inset se selezionato. Le virgole separano i livelli; l’ordine modifica la sovrapposizione.
X, Y ed espansione: −50…50; sfocatura: 0…100; opacità: 0…100%. HEX ammette #RGB o #RRGGBB. Un livello incompleto o non valido svuota il risultato combinato.
Copiato
Copia non riuscita. Seleziona il risultato e copialo manualmente.
Informazioni su Generatore Box Shadow
Componi ombre CSS per schede, pulsanti e contenitori con livelli modificabili e sei preimpostazioni. Le anteprime arrotondata e circolare confrontano gli stessi valori.
X=5, Y=5, sfocatura=20, espansione=0, nero al 25%: box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
Gli esempi usano colori e dimensioni indicati; l’aspetto dipende anche dal layout di destinazione e dal browser.
Casi d'uso
Come usare
Scegli una preimpostazione o mantieni il livello iniziale.
Seleziona il livello e imposta X/Y con segno.
Regola sfocatura, espansione e HEX completo.
Imposta opacità o inset e aggiungi o rimuovi livelli.
Confronta le forme e copia il CSS corrente.
Suggerimenti Pro
- L’espansione allarga o contrae l’ombra; la sfocatura ammorbidisce il bordo. X/Y negativi la spostano a sinistra/in alto. Verifica gli effetti hover nel tuo CSS.
- Il generatore calcola CSS nella memoria del browser e non salva le ombre. Il tema del sito può usare localStorage; le altre richieste della pagina restano separate.
- Ombre sottili sembrano più naturali (bassa opacità, sfocatura leggera)
- Usa ombre multiple per profondità
- Ombre inset creano effetti premuti
Risoluzione dei problemi
Controlla il colore HEX completo e i limiti numerici; il risultato attuale non è disponibile.
X, Y ed espansione: −50…50; sfocatura: 0…100; opacità: 0…100%. HEX ammette #RGB o #RRGGBB. Un livello incompleto o non valido svuota il risultato combinato.
Perché lo 0% nasconde un’ombra interna?
Inset sceglie la posizione interna; alfa 0 rende trasparente il livello. Entrambi rimangono nel CSS.
Domande frequenti
Inset sceglie la posizione interna; alfa 0 rende trasparente il livello. Entrambi rimangono nel CSS.
Aggiungi livelli e selezionali per modificarli. La dichiarazione copiata li separa con virgole; rimane almeno un livello.
Spread espande o contrae la dimensione ombra oltre l elemento.
Quanto morbidi o duri appaiono i bordi. Più alto = più morbido.