Come fare un Testo con Gradiente su Elementor (CSS)

Codice HTML da inserire nell’elemento:

<span class="gradiente">TESTO CON GRADIENTE</span>

Codice solo Gradiente

.gradiente {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    -webkit-background-clip: text;
    color: transparent!important;
    font-weight: 800;
}

Codice Gradiente con Ombra:

.gradiente {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    -webkit-background-clip: text;
    color: transparent!important;
    font-weight: 800;
    filter: drop-shadow(1px 2px 3px #333);
}

Dove inserire i codici?

Ti basterà aggiungere il codice HTML all’interno di un Intestazione o di qualsiasi testo:

oppure dare il nome della classe su Elementor nella scheda Avanzato dell’elemento utilizzato (questo sarà applicato su TUTTO l’elemento), su classi CSS.

Mentre il CSS, puoi inserirlo cliccando sull’iconcina in basso a sinistra delle Impostazioni Pagina

E inserirlo su Avanzato -> CSS Personalizzato

Ma cosa significa questo codice?

.gradiente: è la classe alla quale si vogliono applicare gli stili con il CSS. Le classi si definiscono inserendo un punto (.) davanti al nome della classe, dopodichè sia aprono e chiudono le graffe per andare ad inserire il codice.

background-image: Andiamo ad applicare la sfumatura o gradiente come sfondo dell’elemento, in questo caso al testoutilizzando questo linear-gradient(to right, #fa709a 0%, #fee140 100%).

I parametri sono 3, ma possono essere anche 4 o più se vogliamo aggiungere altri colori:
to right: da sinistra a destra, altrimenti dovrai usare to left, oppure 0deg (dall’alto in basso), 180deg (dal basso in alto)
#fa709a 0%: il primo colore che vogliamo che parta dall’inizio
#fee140 100%: il secondo colore che vogliamo finisca alla fine
se volessimo aggiungere un terzo colore, ci basta aggiungere prima della chiusura della parentesi una virgola e un terzo colore, rimuovendo le percentuali o inserendo il 50% al secondo colore e 100% al terzo.

background-clip: con questa funzione, andremo a dire fino a dove vogliamo che questo gradiente si estenda, ovvero nello specifico, dove vogliamo che si veda il gradiente, in questo caso all’interno del testo.

color: il colore del testo, e dato che abbiamo utilizzato lo sfondo come testo, andremo ad impostare come colore il trasparente! E !important finale, perchè? Perchè stabilirà che questo codice è prioritario rispetto alle agli altri colori magari già impostati da elementor!

filter: drop-shadow:, anzichè utilizzare la classica ombreggiatura, dato che il testo è trasparente, quest’ultima verrà visualizzata sopra il testo anzichè sotto, perchè ripeto, stiamo utilizzando uno sfondo per poter creare questo effetto.

Quindi qui ci viene in aiuto un filtro che andrà a creare l’ombreggiatura all’elemento finale che ci serve.
Ma come funziona il drop shadow?

Come puoi vedere abbiamo 4 parametri da poter impostare: drop-shadow(1px 2px 3px #444);
Il primo è quanti pixel vuoi che sia lontano dall’asse delle X, il secondo dall’asse delle Y, il terzo è la sfocatura, mentre il quarto è il colore con codice HEX, ma puoi utilizzare anche rgb, rgba o il nome in inglese del colore come: blue, white, black, ecc..

Su Elementor puoi utilizzare questi codici come più ti piace, potrai inserirlo in un singolo testo, ma se ne hai bisogno più volte all’interno della pagina, ti consiglio come in questo caso di utilizzare una classe, perchè è replicabile su ogni elemento che ce l’hanno.

Condividi l'articolo:
Ti possono interessare anche...