Generatore di box-shadow CSS
Costruisci un valore box-shadow regolando offset, sfocatura, espansione e colore, con più livelli e preimpostazioni.
Generatore di box-shadow CSS
Regola l'offset orizzontale e verticale, il raggio di sfocatura, il raggio di espansione e il colore, e questo strumento assembla la dichiarazione box-shadow corrispondente man mano che procedi. È costruito per il caso quotidiano — una carta, un pulsante, una modale che ha bisogno di decollare dalla pagina — così come per le ombre stratificate composte da più ombre impilate insieme, la tecnica alla base della profondità morbida e realistica utilizzata nella maggior parte dei moderni sistemi di design.
Il menu a discesa dei preimpostati offre elevazione sottile, media e forte, ognuna con il proprio numero di livelli, offset e sfocatura già regolati; scegli personalizzato per controllare ogni valore da solo. L'opzione livelli controlla quante ombre si impilano: ogni livello aggiunto aumenta l'offset e la sfocatura in base al suo indice e riduce la sua opacità, trasformando un'unica ombra piatta in un'ombra morbida e convincente. Interno capovolge l'ombra verso l'interno per gli elementi premuti, l'opacità controlla quanto forte legge il colore, e l'interruttore di unità produce px o rem. Attiva la variante in modalità scura per una seconda dichiarazione più forte avvolta in un blocco @media (prefers-color-scheme: dark) — un'ombra ha bisogno di più opacità per rimanere visibile su uno sfondo scuro. Scegli se il risultato esce come una sola riga, una proprietà personalizzata --box-shadow, o una classe .box-shadow, e aggiungi una riga filter: drop-shadow corrispondente per gli elementi che box-shadow non può raggiungere, come un'icona SVG o un PNG trasparente.
Ogni valore è limitato a un intervallo ragionevole, e un colore non riconosciuto torna al nero piuttosto che a CSS non valido, quindi l'output si incolla sempre correttamente in un foglio di stile.
Tutto funziona nel tuo browser mentre regoli i controlli — nessun colore o CSS generato viene mai inviato da nessuna parte. Copia il risultato, scaricalo come file .txt, o invialo a un altro strumento per continuare a lavorarci.