Sfumare i testi tramite un gradiente CSS

In questa breve guida scoprirai come realizzare un testo sfumato su Oxygen tramite un gradiente CSS.

Realizzato da
Vincenzo Iracà
Aggiornato al
9 Settembre 2020
css-gradiente-testo

Cerchi ispirazione per il tuo sito web?

Su Oxygen è possibile realizzare un'infinità di cose, ma ci sarà sempre qualcosa di "non preventivato". In ogni caso non è un problema, perché sempre su Oxygen abbiamo modo di personalizzare al 100% il codice CSS!

Qualche giorno fa mi è stato chiesto come ho fatto a realizzare alcuni testi sfumati sul mio sito web, quindi ho deciso di spiegarlo in un articolo 🙂

La procedura è molto semplice, dobbiamo applicare a un testo o a un titolo un gradiente tramite codice CSS, vediamo subito come!

Codice CSS per testi sfumati

Dopo aver creato il nostro testo nella pagina, selezioniamolo e clicchiamo sulla tab "Advanced", poi su "Custom CSS". Qui dentro dovrai incollare il seguente codice:

background: -webkit-linear-gradient(140deg, #ff005d, #c700ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Puoi modificare a tuo piacimento l'angolo del gradiente e i colori utilizzati per la sfumatura. Nel mio caso ho usato un angolo di 140deg e i colori #ff005d / #c700ff.

Creare una classe per il gradiente

Voglio darti un consiglio! Se userai questa tecnica probabilmente la andrai ad applicare su più testi del sito web. Per comodità, ti consiglio di creare una classe e rinominala ad esempio "gradiente-testo".

Così facendo eviterai di digitare ogni volta queste stringhe di codice, ti basterà assegnare la classe agli elementi desiderati!

classe-css-per-gradiente-testo

Spero che questo tutorial ti sia tornato utile 🙂 ci sentiamo presto!

Vincenzo Iracà
Web Developer & Designer

Mi chiamo Vincenzo Iracà e insieme a Stefano Lavazza abbiamo fondato la nostra Agenzia Web. In Klorofilla realizziamo siti web professionali e landing page mirate a ottenere elevati tassi di conversione.

Da diversi anni sviluppiamo i progetti dei nostri clienti su WordPress tramite Oxygen Builder. Abbiamo deciso di contribuire in maniera attiva alla diffusione di questo page builder, che attualmente possiamo considerare il migliore sul mercato, tramite questo blog e la nostra community su Facebook.

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Resta sempre aggiornato

Ricevi tutorial, guide e consigli pratici in pillole (niente spam, promesso!).

menu