Cómo crear un efecto de degradado en el color de la fuente con CSS
- 346Palabras
- 2Minutos
- 15 Aug, 2024
En el desarrollo frontend, a veces necesitamos crear un efecto de degradado en el texto. Aunque podemos lograrlo usando imágenes, las imágenes no se integran bien con el texto normal, y además, cuando necesitamos cambiar el texto o el color, es necesario rehacer la imagen, lo cual es muy poco práctico. Ahora, con la ayuda de la propiedad background de CSS y -webkit-background-clip, podemos crear un efecto de degradado en el color de la fuente.
Degradado Completo en el Color de la Fuente
Aquí hay un ejemplo de cómo aplicar un degradado a todo el texto:
1<!doctype html>2<html lang="es">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Degradado de color en el texto</title>7 <style>8 .gradient-text {9 background: linear-gradient(90deg, #ff7a18, #af002d 70%);10 -webkit-background-clip: text;11 -webkit-text-fill-color: transparent;12 }13 </style>14 </head>15 <body>16 <h1 class="gradient-text">Efecto de degradado en el texto</h1>17 </body>18</html>Explicación:
background: linear-gradient(...): Establece un fondo degradado.-webkit-background-clip: text: Recorta el fondo al área del texto.-webkit-text-fill-color: transparent: Hace que el color del texto sea transparente para mostrar el degradado del fondo.
Degradado Independiente por Letra
Si deseas que cada letra tenga su propio efecto de degradado en lugar de que todo el texto comparta el mismo fondo degradado, puedes usar el siguiente enfoque:
1<!doctype html>2<html lang="es">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Degradado por letra</title>7 <style>8 .gradient-letter {9 display: inline-block;10 background: linear-gradient(90deg, #ff7a18, #af002d);11 -webkit-background-clip: text;12 -webkit-text-fill-color: transparent;13 font-size: 40px;14 margin-right: 2px;15 }16 </style>17 </head>18 <body>19 <h1>20 <span class="gradient-letter">L</span>21 <span class="gradient-letter">e</span>22 <span class="gradient-letter">t</span>23 <span class="gradient-letter">r</span>24 <span class="gradient-letter">a</span>25 </h1>26 </body>27</html>Explicación:
display: inline-block;: Asegura que cada letra se muestre como un bloque independiente para aplicar su propio fondo.background: linear-gradient(...): Aplica un fondo degradado independiente a cada letra.-webkit-background-clip: text;y-webkit-text-fill-color: transparent;: Llenan el área del texto con el fondo y hacen transparente el texto para mostrar el degradado.
Resumen
CSS ofrece métodos flexibles para crear efectos de degradado en el texto. Ya sea un degradado completo o uno independiente por cada letra, estos efectos se pueden lograr utilizando las propiedades adecuadas de CSS. Este tipo de efectos no solo mejoran el atractivo visual de las páginas web, sino que también mejoran la experiencia del usuario.
