Generatore CSS Box Shadow
Crea box-shadow CSS a strati con cursori in tempo reale per offset, sfocatura, diffusione, colore, opacità e inset — anteprima su un elemento reale e copia il CSS pronto all'uso.
box-shadow: —;
Tutto si aggiorna in tempo reale nel browser — nessun caricamento, nessuna registrazione, completamente gratuito.
Informazioni su Generatore CSS Box Shadow
Il Generatore di Box Shadow CSS ti permette di progettare ombre visivamente invece di indovinare i valori nel codice. Trascina i cursori per offset orizzontale e verticale, raggio di sfocatura, raggio di diffusione, colore e opacità — con un interruttore per l'ombra interna — e osserva un elemento reale aggiornarsi in tempo reale. Quando è come vuoi, copia il CSS pronto all'uso con un clic.
Le ombre nelle UI moderne raramente sono un singolo livello. Questo generatore supporta livelli di ombra sovrapposti: aggiungi, duplica, nascondi o rimuovi livelli, e visualizza in anteprima il livello selezionato da solo oppure tutti i livelli combinati. Sovrapporre un'ombra scura e stretta sotto una più morbida e ampia è il modo in cui schede e pulsanti curati ottengono profondità.
Puoi anche stilizzare l'elemento di anteprima stesso — colore del box, raggio dei bordi e sfondo del canvas — così l'ombra viene giudicata in un contesto realistico, incluse le superfici scure. Parti da un preset, premi "Casualizza livello" per ispirazione, e reimposta ogni volta che vuoi ripartire da zero. Tutto funziona nel tuo browser.
Come usare Generatore CSS Box Shadow
- Regola i cursori per offset orizzontale, offset verticale, sfocatura, diffusione, colore e opacità, e attiva "Ombra interna" se vuoi un'ombra interna.
- Clicca su "Aggiungi livello" o "Duplica livello" per sovrapporre le ombre, e passa dalla modalità anteprima "Questo livello" a "Tutti i livelli" per perfezionare ognuna.
- Regola l'elemento e il canvas — colore del box, raggio dei bordi e sfondo — così l'anteprima corrisponde al tuo design reale.
- Applica un preset o usa "Casualizza livello" se vuoi un punto di partenza invece di cursori vuoti.
- Copia la regola CSS completa (o solo il valore) e incollala nel tuo foglio di stile.