Crea box-shadow CSS con cursori e anteprima su elemento live
Un generatore di box-shadow ti lascia progettare un'ombra CSS con cursori e un'anteprima dal vivo, poi copiare il valore box-shadow esatto nel tuo foglio di stile. Le ombre CSS sono controllate da una manciata di numeri — scostamento orizzontale e verticale, raggio di sfocatura, espansione e un colore — e la relazione tra essi è difficile da immaginare dal solo codice. Trascinare un cursore e guardare l'ombra cambiare su un elemento campione è molto più rapido che modificare numeri alla cieca e ricaricare per vedere il risultato.
Le buone ombre sono ciò che dà a un'interfaccia piatta un senso di profondità e gerarchia: un'ombra sottile e morbida solleva una scheda dalla pagina, mentre una più stretta e scura suggerisce un pulsante che puoi premere. Il trucco che la maggior parte manca è che la profondità realistica viene da ombre morbide e a bassa opacità invece che nere e pesanti — e il generatore rende facile regolare quella morbidezza a occhio. Supporta anche le ombre interne (inset) per profondità verso l'interno. Questo strumento produce CSS basato su standard nel browser, pronto da incollare su pulsanti, schede, modali e campi.
Nell'ordine sono: scostamento orizzontale, scostamento verticale, raggio di sfocatura, raggio di espansione e colore. Gli scostamenti spostano l'ombra, la sfocatura ammorbidisce il bordo, l'espansione la ingrandisce o riduce, e il colore (di solito a bassa opacità) ne fissa l'intensità. Una parola chiave opzionale "inset" disegna l'ombra dentro l'elemento.
Usa una sfocatura morbida e un colore a bassa opacità invece del nero pieno, e tieni lo scostamento verticale più grande di quello orizzontale per imitare la luce dall'alto. Ombre sottili e morbide si leggono come profondità naturale; quelle scure e pesanti appaiono artificiali.
Aggiungere la parola chiave inset disegna l'ombra dentro l'elemento invece che fuori, creando un aspetto interno e incassato — utile per pulsanti premuti, campi di input o effetti incisi. Si applicano gli stessi valori di scostamento, sfocatura ed espansione, solo rivolti verso l'interno.
Sì. CSS ti permette di impilare più box-shadow su un elemento separandole con virgole, ed è così che spesso si costruisce la profondità realistica — combinando un'ombra stretta e scura con una più ampia e morbida. Il valore generato può contenere più livelli.
Generatore raggio bordo CSS · Generatore Flexbox · Generatore CSS Grid · Generatore ombra testo CSS · Generatore animazioni CSS · Generatore filtri CSS