En el anterior post sobre CSS ya te hablé sobre cómo puedes crear todo tipo de degradados o gradients con este poderoso lenguaje, sin embargo, hay cierto aspecto que no mencioné ya que se trata de más bien de un truco que de una función de CSS como tal.
Me refiero por supuesto a lo que deja bien claro el título de este post, crear textos con un degradado. Por si no queda claro a qué me refiero, lo que digo es que el propio texto en lugar de ser de un color plano, sea un degradado.
¡Consulta nuestros servicios!
CSS no tiene ninguna orden que nos permita hacer esto de forma directa (al menos a día de escrito este post), pero sí que podemos lograrlo usando una metodología bastante particular que por supuesto te explicaré ahora. ¡Vamos allá!
Tabla de Contenidos
Código para Lograrlo
Para lograr el efecto de degradado en un texto, necesitas el siguiente código:
p.bigp {
background-image: linear-gradient(#03aef3, #FFFFFF, #61008d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Este sería el resultado:
Hola, soy un texto molón con degradado
Este caso, por supuesto, estamos aplicando los estilos a «p.bigp», es decir, a párrafos que tengan la clase «bigp». Yo lo he hecho así para ilustrar este ejemplo, tú debes usar el selector que necesites. En mi caso he añadido todavía más estilos a «p.bigp», te dejo el código completo (no lo he hecho al inicio para no liarte, lo añadido son cosas que cumplen otra función como aumentar el tamaño del texto y aplicarle negrita).
// Todo el código que he usado realmente para el estilo
p.bigp {
color: white;
font-size: 2rem;
font-weight: bold;
background-image: linear-gradient(#03aef3, #FFFFFF, #61008d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Volviendo al tema, ¿nada mal el resultado verdad? Como ves, es bastante sencillo, pero quizás te estés preguntando que qué es todo esto del «-webkit» que hemos añadido en dos de las líneas. Te explico a continuación.
¿Qué Problema Tiene Esto y Cómo se Soluciona?
Pues verás, el problema es precisamente que estamos usando ordenes que no pertenecen a CSS. Sé que suena bastante loco ya que a fin de cuentas el código funciona, pero te explico por encima.
Algunos navegadores cuentan con ciertas órdenes propias bastante chulas como estas que estamos usando. En este caso, las de -webkit son órdenes que sí funcionarán en algunos navegadores (Chrome o Safari por ejemplo), pero… el problema es que habrá algunos navegadores en los que no funcionará (sobre todo navegadores raros o los que están desactualizados).
En estos casos no puedes hacer nada, pero al menos puedes usar la orden «color» (debe estar colocada antes que el código que consigue el efecto de degradado) para que en esos casos al menos muestre el color plano que tú quieras. Al menos tendrás la situación bajo control cuando eso ocurra.
¿Cómo es que este Código tan Raro Funciona?
Te explico la lógica para que este «truco» funcione.
background-image: linear-gradient
Esta parte seguro que la entendéis todos, pero la explico de todos modos. Con esto estamos consiguiendo que el fondo del texto (el fondo, es decir, no el texto, sino que lo que hay detrás y a los lados) sea el que tenga el degradado en cuestión. Si solo nos quedamos con esta primera línea de código de las 3 que logran el efecto, obtendríamos esto:
p.sologradient {
background-image: linear-gradient(#03aef3, #FFFFFF, #61008d);
color: #111; /* Le cambio el color a gris prácticamente negro para que se vea mejor el punto */
font-size: 2rem;
font-weight: bold;
}
Así se vería sin las otras 2 líneas
La magia está por supuesto en lo que hacen las otras 2 líneas de código, vamos con ellas.
-webkit-background-clip
Lo que hace esta orden es definir qué es el background o fondo mediante un recorte, es decir, al asignarle «text» le estamos diciendo que recorte todo el background para que el fondo sean las propias letras. Sin embargo, mira qué ocurre de momento (todavía nos falta la última línea):
p.yacasilotenemos {
color: white; /* Vuelvo a poner el color en blanco porque ahora sí que conviene más este color */
background-image: linear-gradient(#03aef3, #FFFFFF, #61008d);
-webkit-background-clip: text;
font-size: 2rem;
font-weight: bold;
}
A continuación el resultado:
Casi, pero aun no funciona (falta la última línea)
Parece que hemos ido hacia atrás, pero vamos bien. Verás, ahora ha desaparecido el degradado en el fondo porque ahora el fondo son las propias letras. ¿Por qué entonces no está funcionando todavía? pues porque el color de las letras está poniéndose por encima del fondo (recordemos que ahora el fondo son las letras).
Pues le quito la orden color y listo… Eso no funciona porque aunque tú no le añadas ningún color a las letras por ti mismo, lo va a hacer el navegador por defecto (aunque le pongas transparent como color, lo que harás es que desaparezca el texto). Ahí es donde entra la última línea.
-webkit-text-fill-color
Lo que hace esta línea a la que le añadimos transparent como valor no es cambiar el color de las letras como tal (que a efectos prácticos lo hace), lo que hace es cambiar el color de relleno de las letras. Suena a que he inhalado cosas extrañas, pero eso es lo que se han inventado para conseguir este efecto.
Usando esto haremos que las letras sean transparentes, pero estas no desaparecerán como tal (y nos quita el problema del color que tienen por defecto las letras hagas lo que hagas) porque lo que has cambiado es el color de relleno, no el color directamente (a más lo digo más lioso me suena, pero aunque sea rebuscado, creo que se entiende el punto).
Total, que como las letras ahora son transparentes pero no desaparecen, lo que vemos es lo que hay detrás de ellas… ¡el fondo! (que ahora el fondo son las letras y este tiene un degradado). Por lo que vamos, con esto si nos ponemos muy literales… no estamos creando unas letras con degradado, sino que estamos creando un fondo con degradado que tiene la misma forma que las letras.
¡Ahora sí!
Un Par de Ejemplos de Personalización
Si quieres personalizar el degradado de tus textos te recomiendo que te leas mi post sobre degradados de CSS, que allí explico todo con mucho más detalle y lo vas a entender mucho mejor (te lo he enlazado arriba del todo). De todos modos, para no quedarnos con mal sabor de boca después del rollo que te he soltado antes de la lógica de este truco, te dejaré un par de ejemplos por aquí.
Texto con Degradado Horizontal
De momento, en todos los ejemplos que te he mostrado, el degradado siempre ha sido vertical (de arriba a abajo). Por ello, ahora te dejo un ejemplo de cómo puedes conseguir un degradado horizontal y de paso te mostraré algo bastante curioso de este caso.
p.ejemplo1 {
color: white;
background-image: linear-gradient(to right, #FFFFFF, #61008d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: bold;
}
En este caso tengo añadir un texto largo ya que de lo contrario no se aprecia bien el efecto. Recuerda que lo que estamos pintando es el fondo, no las letras en sí.
Como ves, se crea un efecto bastante chulo a mi parecer ya que como realmente estamos pintando un background que se imprime únicamente sobre las letras (más o menos, la explicación más precisa la tienes arriba), por lo que aunque el texto haga un salto de línea se mantiene el mismo degradado en cada fila.
Texto con Degradado Circular
Con un degradado circular también queda un efecto bastante curioso.
p.ejemplo2 {
color: white;
background-image: radial-gradient(#FFFFFF, #00c69f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2rem;
font-weight: bold;
}
// Media Query para mejorar la visualización en escritorio
// Es para el ejemplo, no hagáis mucho caso a esto que es otro tema
@media (min-width: 480px) {
p.ejemplo2 {width:50%}
}
De nuevo tengo que añadir un texto un poco largo con el objetivo de que puedas apreciar bien este curioso efecto de degradado en el texto, ¿qué te parece?
He añadido la Media Query simplemente para que puedas ver mejor el efecto en la versión de escritorio (esa orden solo se aplica a dispositivos cuya pantalla sea de 480px o más de ancho). Más que nada para que quedara un poco más «cuadrado» (me refiero a que tenga proporciones cuadradas, es decir, bastante similares) ya que es en este caso cuando el efecto queda bastante fino.
Y nada, eso sería todo por hoy. Espero que te vengan bien estos consejos para poder crear tus propios textos con degradado, que ya ves que la forma de hacerlo al menos a día de escrito este post es algo liosa, pero de momento es lo que hay. Cualquier duda o lo que sea, ¡déjame un comentario!
Más información aquí.
Otros Posts que Pueden Interesarte:
- Cómo Crear Degradados (Gradients) en CSS
- Cómo Convertir Texto en Mayúsculas o Minúsculas en CSS
- Cómo Modificar el Espacio entre Letras en CSS
- Cómo Cambiar el Tamaño del Texto con CSS
- Cómo Crear Contenedores con Efecto de Neón en CSS
- Cómo Dominar el Display Grid en CSS
- Cómo Crear Texto Tachado en HTML y CSS
