LabEx
EntrarÚnete

Crear texto con degradado con CSS

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos el concepto de texto con degradado en CSS. El propósito de este laboratorio es ayudarte a entender cómo crear texto con degradado utilizando la función linear-gradient(), así como cómo utilizar las propiedades webkit-text-fill-color y webkit-background-clip para rellenar el texto con un fondo degradado. Al final de este laboratorio, serás capaz de crear texto con degradado visualmente atractivo que puede mejorar el diseño de tus páginas web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Texto con degradado

index.html y style.css ya se han proporcionado en la máquina virtual.

Para darle un color degradado al texto, puedes utilizar propiedades de CSS. Primero, utiliza la propiedad background con un valor de linear-gradient() para darle al elemento de texto un fondo degradado. Luego, utiliza webkit-text-fill-color: transparent para rellenar el texto con un color transparente. Finalmente, utiliza webkit-background-clip: text para recortar el fondo con el texto y rellenar el texto con el fondo degradado como color. Aquí hay un fragmento de código de ejemplo:

<p class="gradient-text">Texto con degradado</p>

.gradient-text {
  background: linear-gradient(#70d6ff, #00072d);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Texto con degradado. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.