CodeKitHubChe cos'è questo strumento?
Questo strumento combina un text-shadow di colore chiaro e uno di colore scuro, spostati in direzioni opposte, per creare l'illusione di testo sollevato (in rilievo) o scavato (inciso).
Passa tra gli stili In rilievo e Inciso, e regola il cursore dell'intensità per controllare quanto risulti marcato l'effetto 3D.
Un'anteprima dal vivo si aggiorna istantaneamente mentre digiti o modifichi un'impostazione, così puoi rifinire l'effetto prima di copiare il CSS.
Perché usarlo?
- Stai costruendo un tema UI retrò in stile Windows 95 o scheumorfico e ti serve quel classico look "premuto nella plastica grigia" senza regolare a mano gli offset delle ombre negli strumenti di sviluppo.
- Stai progettando un badge o un'icona di achievement e vuoi che il testo sembri stampato o inciso in uno sfondo simile al metallo invece che appoggiato piatto sopra.
- Un designer ti ha consegnato un mockup con un titolo in rilievo e nessun CSS — ricrea l'effetto qui invece di indovinare i valori delle ombre per tentativi.
- Vuoi un look vecchio stile "scolpito nella pietra" o da stampa a caldo per un logo o un titolo hero senza aprire un editor di immagini o un filtro SVG.
- Stai prototipando diversi livelli di intensità fianco a fianco per capire quanto dovrebbe essere sottile o marcato l'effetto 3D prima di fissare un design definitivo.
- 100% locale: il CSS viene generato interamente nel tuo browser, senza inviare nulla a un server.
Come si usa
- Digita il testo a cui vuoi applicare lo stile.
- Scegli In rilievo (sollevato) o Inciso (scavato) dal selettore di stile.
- Regola il cursore dell'intensità e scegli un colore di sfondo e del testo coerenti con il tuo design.
- Clicca su "Copia" per copiare il codice CSS generato e incollalo nel tuo foglio di stile.
Esempio
Input
Testo: "Embossed", Stile: In rilievo, Intensità: 2Risultato
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Il CSS generato imposta il colore del testo, il colore di sfondo e un text-shadow a due livelli che crea l'effetto sollevato o scavato.
Come funziona l'effetto
Gli effetti in rilievo e inciso sono costruiti da due livelli di text-shadow sfalsati, con colori chiari e scuri opposti.
| Proprietà | Scopo |
|---|---|
| Ombra chiara (rgba(255,255,255,0.7)) | Simula una fonte di luce che colpisce un bordo del testo |
| Ombra scura (rgba(0,0,0,0.5)) | Simula un'ombra che cade sul bordo opposto |
| Direzione dello spostamento | Invertita tra In rilievo e Inciso per ribaltare l'illusione 3D |
| Intensità | Controlla di quanto le ombre chiara e scura sono spostate rispetto al testo |
| Colori abbinati | Colore del testo e dello sfondo impostati vicini per nascondere il contrasto piatto |
Strumenti correlati
Per altri generatori CSS, prova questi.
→ Generatore di Glassmorphism CSS · Generatore di Box Shadow · Generatore di Border Radius
Dove funziona meglio il testo in rilievo e inciso
- Titoli di sezione ed etichette su una card o un pannello a colore piatto, dove il sottile effetto 3D aggiunge texture senza competere con il contenuto principale.
- Badge, sigilli e icone di achievement, dove un aspetto stampato o inciso rinforza la sensazione di qualcosa di ufficiale o guadagnato.
- Temi UI retrò o scheumorfici (chrome di vecchi sistemi operativi, pulsanti in rilievo) dove l'effetto fa parte del linguaggio di design invece di essere un accento isolato.
- Evitalo su testo del corpo piccolo o paragrafi lunghi — l'effetto si basa su colori di testo/sfondo molto simili, il che danneggia la leggibilità normale alle dimensioni piccole.
Domande frequenti
Qual è la differenza tra In rilievo e Inciso?
In rilievo fa apparire il testo sollevato rispetto allo sfondo, con l'ombra chiara in alto a sinistra e l'ombra scura in basso a destra. Inciso inverte questo effetto, facendo apparire il testo come scavato nello sfondo.
Perché l'effetto rende meglio con un colore del testo e dello sfondo simili?
L'illusione di rilievo o incisione dipende interamente dalle luci e ombre, non dal contrasto tra testo e sfondo — quindi impostare il colore del testo vicino a (o uguale a) quello dello sfondo di solito dà il risultato più pulito.
Posso usare questo effetto su qualsiasi elemento, non solo sul testo?
La proprietà text-shadow generata da questo strumento si applica solo al testo. Per un effetto simile su forme o pulsanti, servirebbe una configurazione box-shadow comparabile.
Questo strumento salva o traccia ciò che scrivo?
No. Il CSS viene generato interamente nel tuo browser — nulla viene inviato o memorizzato su un server.
Funzionerà su tutti i browser?
Sì — text-shadow ha un ottimo supporto su tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge.
Perché l'effetto in rilievo scompare o sembra sbagliato su uno sfondo scuro?
Il livello di ombra chiara si basa sul risaltare contro una superficie più chiara — su uno sfondo molto scuro, l'evidenziazione bianca può sbiadire o sembrare invertita rispetto a quanto ti aspetteresti. Prova a impostare testo e sfondo su un grigio medio, oppure aumenta l'opacità dell'ombra chiara, per mantenere leggibile l'illusione 3D sui temi scuri.
Posso animare o fare una transizione dell'effetto in rilievo al passaggio del mouse?
Sì — text-shadow è animabile con una transizione CSS, quindi puoi passare in modo fluido da uno stato piatto a uno in rilievo (o tra intensità In rilievo e Inciso) su :hover o :focus. Copia il valore dell'ombra generata come stato "hover" e abbinalo a una regola transition: text-shadow 0.2s ease; sull'elemento base.
Il cursore dell'intensità influisce sulle prestazioni con grandi quantità di testo?
No — text-shadow è una proprietà CSS leggera indipendentemente dall'intensità, dato che si tratta solo di due livelli di ombra calcolati allo stesso modo che l'offset sia 1px o 6px. È sicuro usarla su titoli, pulsanti o testo del corpo senza preoccupazioni per le prestazioni di rendering.
Come faccio a far rendere bene l'effetto con un font personalizzato invece di quello predefinito?
L'illusione di rilievo/incisione tende a leggersi più chiaramente su font grassetto e dal tratto spesso, dato che c'è più superficie perché l'offset dell'ombra catturi luce e ombra. Font sottili o leggeri possono far sembrare l'effetto debole o confuso — se il tuo font personalizzato non è chiaro, prova un peso più marcato o aumenta leggermente l'intensità per compensare.
Posso usare due colori diversi invece di bianco/nero per le ombre chiara e scura?
Il CSS generato è un punto di partenza che sei libero di modificare — sostituisci i valori rgba(255,255,255,...) e rgba(0,0,0,...) con qualsiasi coppia di colori una volta copiato il codice, ad esempio un'evidenziazione dorata calda e un'ombra marrone scura per un effetto placca di bronzo invece del classico metallo grigio.