text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;Che cos'è il generatore di ombre di testo CSS?
Il generatore di ombre di testo CSS è un editor visivo per la proprietà di ombra di testo CSS. Puoi regolare l'offset orizzontale, l'offset verticale, il raggio di sfocatura, il colore e l'opacità con i cursori e guardare l'effetto renderizzato dal vivo su un testo di esempio, quindi copiare il CSS esatto. Invece di indovinare i valori dei pixel e aggiornare la tua pagina, dai forma direttamente l'ombra e leggi il codice che produce.
La proprietà text-shadow è più semplice di box-shadow - non ha raggio di diffusione e nessuna parola chiave inserita - ma la stratificazione è dove diventa potente Una singola dichiarazione può impilare diverse ombre, ognuna con i propri offset, sfocatura e colore I livelli di impilamento sono il modo in cui si costruiscono bagliori al neon, contorni duri, caratteri retrò 3D, effetti di rilievo tipografici e lunghe ombre piatte Scriverli a mano è complicato, quindi questo strumento gestisce i livelli e restituisce una dichiarazione specifica-valida e separata da virgole nell'ordine di verniciatura corretto.
Tutto accade nel tuo browser. Scegli un preset come bagliore al neon o contorno, sintonizza ogni livello, cambia l'anteprima tra sfondi chiari e scuri, modifica il testo di esempio e copia il CSS. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.
L'ordine dei livelli viene eseguito dal primo all'ultimo, dal fronte al retro, quindi l'ombra elencata per prima si trova in cima Questo è ciò che fa funzionare i contorni: quattro piccole ombre sfalsare un pixel in ciascuna direzione, impilate, approssimare un tratto per il quale i CSS non hanno proprietà diretta Il raggio di sfocatura è la parte costosa da renderizzare e il testo con diverse grandi sfocature ridipinte su scorrimento è una causa comune di strappo su dispositivi a potenza inferiore Le ombre non influenzano mai il layout, quindi possono traboccare la loro casella ed essere tagliate da un genitore con overflow nascosto.
Come utilizzare il generatore di ombre di testo CSS?
Inizia da un livello preimpostato o vuoto
Scegli un preset come Soft, Neon Glow, Retro 3D o Outline per ottenere un punto di partenza realistico, o inizia con un singolo livello di ombra predefinito e accumula da lì.
Sintonizzati l'ombra con i cursori
Trascina gli offset orizzontale e verticale e sfoca i cursori del raggio, quindi imposta il colore dell'ombra e l'opacità. Guarda l'aggiornamento del testo di esempio all'istante mentre modifichi.
Impila più livelli per gli effetti
Aggiungi livelli extra per creare bagliore, contorno o profondità 3D - diverse copie offset di un'ombra letta come testo estruso, mentre le copie sfocate impilate lette come bagliore.
Copia il CSS
Copia la dichiarazione di ombre di testo e incollala direttamente nel foglio di stile o negli stili dei componenti. Applicalo a qualsiasi elemento di testo per ottenere lo stesso effetto.
Caratteristiche principali
Ombre a più strati
Impila un numero qualsiasi di livelli di ombra in una dichiarazione, nell'ordine di verniciatura dall'alto in basso corretto, che è il modo in cui vengono costruiti i bagliori, i contorni e il testo 3D
Controllo completo della proprietà
I cursori per offset orizzontale e verticale e raggio di sfocatura, oltre a un selettore di colori e un controllo dell'opacità, coprono ogni parte della grammatica dell'ombra di testo
Anteprima dal vivo
Esempi di testo aggiornati all'istante durante la modifica e puoi cambiare lo sfondo tra chiaro e scuro per verificare come l'effetto legge in entrambi i temi
Preset predefiniti
Le ricette curate per effetti morbidi, duri, al neon, retro 3D, contorno, goffratura, fuoco e ombra lunga ti danno un punto di partenza collaudato invece di una tela bianca
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
Maps Scraper
Pull business listings for any search and place: name, address, category, rating, review count, phone and website, deduplicated and exportable as CSV.
Comments
0 comments
No comments yet. Be the first to share your thoughts!