Tutorial CSS: Efectos de texto: gradientes, recortes

Creación de gradientes lineales con diferentes ángulos y paradas

Los gradientes en CSS permiten crear transiciones suaves entre dos o más colores, añadiendo profundidad y dinamismo a nuestros diseños web. El tipo más básico y versátil es el gradiente lineal, que crea una transición de colores a lo largo de una línea recta.

Para crear un gradiente lineal utilizamos la función linear-gradient() como valor de la propiedad background o background-image. Esta función nos permite definir la dirección del gradiente y las paradas de color que lo componen.

Sintaxis básica

La estructura fundamental de un gradiente lineal es:

.elemento {
  background: linear-gradient(dirección, color1, color2, ...);
}

Donde:

• dirección: determina el ángulo o lado desde donde comienza el gradiente
• color1, color2, ...: son las paradas de color que formarán la transición

Controlando la dirección con ángulos

Podemos especificar la dirección del gradiente mediante ángulos precisos:

.gradiente-45 {
  background: linear-gradient(45deg, blue, red);
}

.gradiente-135 {
  background: linear-gradient(135deg, #ff9500, #ff5e3a);
}

.gradiente-vertical {
  background: linear-gradient(180deg, yellow, green);
}

.gradiente-horizontal {
  background: linear-gradient(90deg, purple, pink);
}

Los ángulos en CSS siguen una convención específica:

• 0deg: de abajo hacia arriba
• 90deg: de izquierda a derecha
• 180deg: de arriba hacia abajo
• 270deg: de derecha a izquierda

También podemos usar palabras clave para definir direcciones comunes:

/* Equivalentes a los ángulos anteriores */
.gradiente-vertical {
  background: linear-gradient(to bottom, yellow, green);
}

.gradiente-horizontal {
  background: linear-gradient(to right, purple, pink);
}

/* Direcciones diagonales */
.gradiente-diagonal {
  background: linear-gradient(to bottom right, #3498db, #8e44ad);
}

Paradas de color y posiciones

Las paradas de color nos permiten controlar con precisión dónde comienza y termina cada color en el gradiente. Podemos añadir posiciones específicas a cada color usando porcentajes o unidades de longitud:

.gradiente-tres-colores {
  background: linear-gradient(to right, red, yellow, green);
}

.gradiente-posiciones {
  background: linear-gradient(60deg, 
    blue 0%, 
    purple 40%, 
    red 100%
  );
}

Para crear transiciones más abruptas, podemos definir la misma posición para dos colores consecutivos:

.gradiente-abrupto {
  background: linear-gradient(to right,
    #ff7e5f 0%,
    #ff7e5f 50%,  /* El primer color termina en 50% */
    #feb47b 50%,  /* El segundo color comienza en 50% */
    #feb47b 100%
  );
}

Este último ejemplo crea una división clara entre los dos colores, sin transición gradual entre ellos.

Gradientes con múltiples paradas

Podemos crear efectos más complejos añadiendo múltiples paradas de color con posiciones estratégicas:

.arcoiris {
  background: linear-gradient(to right,
    red 0%,
    orange 16.6%,
    yellow 33.3%,
    green 50%,
    blue 66.6%,
    indigo 83.3%,
    violet 100%
  );
}

.amanecer {
  background: linear-gradient(0deg,
    #ff7e5f 0%,
    #feb47b 25%,
    #ffcda5 50%,
    #aed9e0 75%,
    #5e6472 100%
  );
}

Repitiendo gradientes

Para patrones que se repiten, podemos usar repeating-linear-gradient():

.rayas {
  background: repeating-linear-gradient(
    45deg,
    #f5f5f5,
    #f5f5f5 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

Este ejemplo crea un patrón de rayas diagonales que se repite cada 20px.

Aplicando gradientes a texto

Aunque veremos más sobre esto en la sección de recortes con background-clip, aquí hay un ejemplo básico de cómo aplicar un gradiente a un texto:

.texto-gradiente {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  font-size: 2.5rem;
}

Ejemplo práctico: Botón con gradiente

Veamos cómo crear un botón atractivo con gradiente y efecto hover:

.boton-gradiente {
  background: linear-gradient(90deg, #4776E6, #8E54E9);
  border: none;
  border-radius: 4px;
  color: white;
  padding: 12px 24px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.boton-gradiente:hover {
  background: linear-gradient(90deg, #8E54E9, #4776E6);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(142, 84, 233, 0.4);
}

Superponiendo gradientes

Podemos crear efectos más complejos superponiendo múltiples gradientes:

.gradiente-superpuesto {
  background: 
    linear-gradient(135deg, rgba(255,0,0,0.5), transparent 70%),
    linear-gradient(225deg, rgba(0,0,255,0.5), transparent 70%),
    linear-gradient(315deg, rgba(0,255,0,0.5), transparent 70%);
}

Este ejemplo combina tres gradientes con transparencia para crear un efecto de superposición de colores.

Compatibilidad con navegadores

Los gradientes lineales tienen buen soporte en navegadores modernos, pero para mayor compatibilidad, especialmente con navegadores más antiguos, podemos usar prefijos:

.gradiente-compatible {
  background: -webkit-linear-gradient(left, red, blue); /* Para Safari */
  background: -moz-linear-gradient(left, red, blue);    /* Para Firefox */
  background: -o-linear-gradient(left, red, blue);      /* Para Opera */
  background: linear-gradient(to right, red, blue);     /* Estándar */
}

Sin embargo, en proyectos modernos, estos prefijos generalmente no son necesarios, ya que el soporte para gradientes es muy amplio en la actualidad.

Los gradientes lineales son solo el comienzo de lo que podemos lograr con CSS. En las siguientes secciones exploraremos otros tipos de gradientes y efectos de texto más avanzados que complementarán estas técnicas.

Gradientes radiales y cónicos para efectos avanzados

Además de los gradientes lineales, CSS ofrece dos tipos de gradientes más sofisticados que nos permiten crear efectos visuales impactantes: los gradientes radiales y los gradientes cónicos. Estos gradientes son perfectos para simular luces, sombras y efectos tridimensionales en nuestros diseños web.

Gradientes radiales

Un gradiente radial crea una transición de colores que se expande desde un punto central hacia el exterior, como si fuera una explosión de luz o una onda. La función radial-gradient() nos permite definir estos efectos.

Sintaxis básica

.elemento {
  background: radial-gradient(forma tamaño at posición, color1, color2, ...);
}

Donde:

• forma: puede ser circle (círculo) o ellipse (elipse, valor predeterminado)
• tamaño: determina hasta dónde llega el gradiente (closest-side, farthest-side, closest-corner, farthest-corner)
• posición: define el centro del gradiente (similar a background-position)
• color1, color2, ...: las paradas de color que formarán la transición

Ejemplos básicos

/* Gradiente radial simple */
.radial-simple {
  background: radial-gradient(red, blue);
}

/* Gradiente circular */
.radial-circular {
  background: radial-gradient(circle, yellow, orange, red);
}

/* Gradiente elíptico (predeterminado) */
.radial-ellipse {
  background: radial-gradient(ellipse, #f7971e, #ffd200, #ff9966);
}

Controlando la posición y el tamaño

Podemos personalizar el centro del gradiente y su alcance:

/* Gradiente descentrado */
.radial-positioned {
  background: radial-gradient(circle at top right, 
    white, 
    #3498db
  );
}

/* Posición con valores específicos */
.radial-precise {
  background: radial-gradient(circle at 70% 30%, 
    #ff7e5f, 
    #feb47b
  );
}

/* Control del tamaño */
.radial-size {
  background: radial-gradient(
    circle closest-side at 20% 50%,
    gold,
    red,
    purple
  );
}

Los valores de tamaño tienen estos efectos:

• closest-side: el gradiente se extiende hasta el lado más cercano
• farthest-side: se extiende hasta el lado más lejano
• closest-corner: llega hasta la esquina más cercana
• farthest-corner (predeterminado): se extiende hasta la esquina más lejana

Efectos prácticos con gradientes radiales

/* Efecto de luz */
.spotlight {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
}

/* Botón con efecto de brillo */
.glow-button {
  background: radial-gradient(
    circle at center,
    #5adaff 0%,
    #5468ff 100%
  );
  border: none;
  border-radius: 50px;
  color: white;
  padding: 12px 30px;
  position: relative;
  overflow: hidden;
}

.glow-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.glow-button:hover::before {
  opacity: 0.3;
}

Gradientes radiales repetitivos

Al igual que con los gradientes lineales, podemos crear patrones que se repiten:

.repeating-radial {
  background: repeating-radial-gradient(
    circle at center,
    #f5f5f5,
    #f5f5f5 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  );
}

Gradientes cónicos

Los gradientes cónicos (también llamados angulares) crean una transición de colores que gira alrededor de un punto central, como si fuera un disco o una rueda de color. Son perfectos para crear efectos de rotación, diales y gráficos circulares.

Sintaxis básica

.elemento {
  background: conic-gradient(from ángulo at posición, color1 porcentaje1, color2 porcentaje2, ...);
}

Donde:

• ángulo: define dónde comienza el gradiente (por defecto es 0deg, arriba)
• posición: define el centro del gradiente
• color1, color2, ...: las paradas de color
• porcentaje1, porcentaje2, ...: posiciones opcionales para las paradas de color

Ejemplos básicos

/* Gradiente cónico simple */
.conic-simple {
  background: conic-gradient(red, yellow, green, blue, purple, red);
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Gradiente cónico con ángulo inicial */
.conic-from {
  background: conic-gradient(
    from 45deg,
    #ff8177, #ff867a, #ff8c7f, #f99185, #cf556c, #b12a5b
  );
  border-radius: 50%;
}

/* Gradiente cónico descentrado */
.conic-positioned {
  background: conic-gradient(
    at 70% 30%,
    #ff7e5f, #feb47b, #ff7e5f
  );
}

Aplicaciones prácticas

Los gradientes cónicos son ideales para crear gráficos circulares y medidores:

/* Gráfico circular simple (tipo pastel) */
.pie-chart {
  background: conic-gradient(
    #4285f4 0% 25%,
    #ea4335 25% 50%,
    #fbbc05 50% 75%,
    #34a853 75% 100%
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

/* Medidor de progreso */
.progress-meter {
  background: conic-gradient(
    #5468ff 0% 75%,    /* Progreso completado */
    #e0e0e0 75% 100%   /* Progreso restante */
  );
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

Efectos avanzados

/* Efecto de rayos */
.sunburst {
  background: repeating-conic-gradient(
    from 0deg,
    #ffde59 0deg 10deg,
    #ffa726 10deg 20deg
  );
  border-radius: 50%;
}

/* Tablero de ajedrez radial */
.radial-checker {
  background: repeating-conic-gradient(
    #222 0deg 30deg,
    #444 30deg 60deg
  );
}

Combinando diferentes tipos de gradientes

Para efectos realmente impresionantes, podemos combinar gradientes radiales, cónicos y lineales:

.complex-background {
  background: 
    radial-gradient(circle at top left, rgba(255, 0, 0, 0.3), transparent 50%),
    conic-gradient(from 180deg at 50% 70%, #ff9a9e, #fad0c4),
    linear-gradient(135deg, #667eea, #764ba2);
}

/* Efecto de neón */
.neon-text {
  background-color: #000;
  color: #fff;
  position: relative;
}

.neon-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #0ff;
  filter: blur(15px);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 255, 255, 0.8),
    transparent 70%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

Compatibilidad con navegadores

Los gradientes radiales tienen buen soporte en navegadores modernos, pero los gradientes cónicos son más recientes y pueden requerir alternativas para navegadores más antiguos:

/* Alternativa para navegadores que no soportan conic-gradient */
@supports not (background: conic-gradient(red, blue)) {
  .pie-chart {
    background: radial-gradient(circle, #4285f4, #ea4335, #fbbc05, #34a853);
  }
}

Los gradientes radiales y cónicos abren un mundo de posibilidades creativas en CSS. Combinados con otras técnicas como animaciones, filtros y mezclas de fondo, pueden crear efectos visuales sorprendentes sin necesidad de imágenes externas, lo que mejora el rendimiento y la flexibilidad de nuestros diseños.

Text-shadow para profundidad y efectos de brillo

La propiedad text-shadow es una herramienta fundamental en CSS que nos permite añadir sombras a los textos, creando efectos de profundidad, dimensión y brillo que pueden transformar por completo la apariencia de nuestro contenido textual. A diferencia de las imágenes, estas sombras son totalmente escalables y se pueden modificar fácilmente mediante CSS.

Sintaxis básica

La estructura de text-shadow es sencilla pero potente:

.elemento {
  text-shadow: desplazamiento-x desplazamiento-y desenfoque color;
}

Donde:

• desplazamiento-x: distancia horizontal de la sombra (valores positivos a la derecha, negativos a la izquierda)
• desplazamiento-y: distancia vertical de la sombra (valores positivos hacia abajo, negativos hacia arriba)
• desenfoque: radio de difuminado (opcional, valor mayor = sombra más difusa)
• color: color de la sombra (puede incluir transparencia con rgba o hsla)

Sombras básicas para mejorar la legibilidad

Una sombra sutil puede mejorar significativamente la legibilidad del texto, especialmente cuando se coloca sobre imágenes o fondos complejos:

.texto-sobre-imagen {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.texto-claro-sobre-claro {
  color: #f8f8f8;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

Creando profundidad con múltiples sombras

Podemos aplicar varias sombras al mismo texto separándolas con comas, lo que nos permite crear efectos de profundidad más complejos:

.texto-3d {
  color: #5c8dff;
  text-shadow: 
    1px 1px 0px #2a4da6,
    2px 2px 0px #2a4da6,
    3px 3px 0px #2a4da6;
  font-weight: bold;
}

.texto-profundo {
  color: white;
  text-shadow: 
    0px 1px 0px #ccc,
    0px 2px 0px #c9c9c9,
    0px 3px 0px #bbb,
    0px 4px 0px #b9b9b9,
    0px 5px 0px #aaa,
    0px 6px 1px rgba(0, 0, 0, 0.1),
    0px 0px 5px rgba(0, 0, 0, 0.1),
    0px 1px 3px rgba(0, 0, 0, 0.3),
    0px 3px 5px rgba(0, 0, 0, 0.2),
    0px 5px 10px rgba(0, 0, 0, 0.25);
  font-size: 2.5rem;
}

Efectos de brillo y resplandor

Para crear efectos de brillo o resplandor, utilizamos sombras claras con valores de desenfoque más altos:

.texto-brillante {
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.texto-neon {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6,
    0 0 20px #0073e6,
    0 0 25px #0073e6;
  font-weight: bold;
}

El efecto neón se logra combinando varias sombras con diferentes radios de desenfoque, creando un halo luminoso alrededor del texto.

Sombras en todas direcciones

Podemos crear un efecto de resplandor uniforme colocando sombras en todas las direcciones:

.texto-resplandor {
  color: #ff5e62;
  text-shadow: 
    0 0 10px rgba(255, 94, 98, 0.8),
    0 0 20px rgba(255, 94, 98, 0.5),
    0 0 30px rgba(255, 94, 98, 0.3);
  font-weight: bold;
}

Efectos de texto con contorno

Aunque CSS no tiene una propiedad específica para contornos de texto, podemos simularlos con múltiples sombras en diferentes direcciones:

.texto-contorno {
  color: white;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.texto-contorno-grueso {
  color: white;
  text-shadow: 
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -3px 0 0 #000,
    3px 0 0 #000,
    0 -3px 0 #000,
    0 3px 0 #000;
  font-weight: bold;
}

Efectos de texto retro y vintage

Podemos recrear estilos de texto retro utilizando combinaciones específicas de sombras:

.texto-retro-80s {
  color: #ff71ce;
  text-shadow: 
    4px 4px 0px #01cdfe,
    8px 8px 0px #05ffa1;
  font-weight: bold;
  letter-spacing: 2px;
}

.texto-vintage {
  color: #f8d568;
  text-shadow: 
    2px 2px 0px #cb4b16,
    4px 4px 0px rgba(0, 0, 0, 0.2);
  font-family: serif;
  font-weight: bold;
}

Combinando text-shadow con animaciones

Las sombras de texto pueden animarse para crear efectos dinámicos:

.texto-pulsante {
  color: #ff3366;
  animation: pulsar 2s infinite;
}

@keyframes pulsar {
  0% {
    text-shadow: 0 0 5px rgba(255, 51, 102, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 51, 102, 0.8);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 51, 102, 0.5);
  }
}

Efectos de texto con temáticas específicas

Podemos crear efectos temáticos específicos ajustando los colores y valores de las sombras:

.texto-fuego {
  color: white;
  text-shadow: 
    0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;
  font-weight: bold;
}

.texto-hielo {
  color: white;
  text-shadow: 
    0 0 10px rgba(158, 230, 255, 0.8),
    0 0 20px rgba(158, 230, 255, 0.5),
    0 0 30px rgba(158, 230, 255, 0.3),
    0 0 40px rgba(30, 144, 255, 0.2);
  font-weight: bold;
}

Mejorando la accesibilidad

Al usar efectos de texto, debemos asegurarnos de mantener un buen contraste para la accesibilidad:

.texto-accesible {
  color: #fff;
  background-color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  /* Asegura un contraste mínimo de 4.5:1 para AA WCAG */
  padding: 0.5em;
}

Combinando text-shadow con otras propiedades

Para efectos más impactantes, podemos combinar text-shadow con otras propiedades CSS:

.texto-impactante {
  color: transparent;
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
}

Consideraciones de rendimiento

Las sombras de texto múltiples y complejas pueden afectar al rendimiento, especialmente en dispositivos móviles:

/* Versión optimizada para móviles */
@media (max-width: 768px) {
  .texto-complejo {
    /* Versión simplificada con menos sombras */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

Compatibilidad con navegadores

La propiedad text-shadow tiene excelente soporte en todos los navegadores modernos. A diferencia de otras propiedades CSS más recientes, no necesita prefijos de proveedor:

.texto-compatible {
  /* No necesita -webkit-, -moz-, etc. */
  text-shadow: 1px 1px 2px black;
}

La propiedad text-shadow es una herramienta versátil que puede transformar textos simples en elementos visuales impactantes. Desde mejorar sutilmente la legibilidad hasta crear efectos dramáticos, las sombras de texto son un recurso esencial en el arsenal de cualquier diseñador web que quiera añadir profundidad y dimensión a sus textos sin recurrir a imágenes.

Técnicas de recorte con background-clip: text

La propiedad background-clip: text es una de las técnicas más creativas en CSS moderno, permitiéndonos recortar un fondo para que solo sea visible a través del contorno de las letras. Esta técnica nos permite crear efectos visuales impactantes donde el texto adopta patrones, imágenes o gradientes como relleno.

Funcionamiento básico

Para aplicar esta técnica necesitamos tres propiedades clave trabajando juntas:

.texto-recortado {
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Analicemos cada parte:

• background: Define el fondo que queremos mostrar a través del texto
• background-clip: text: Recorta el fondo para que solo sea visible dentro de los caracteres del texto
• color: transparent: Hace que el color del texto sea transparente, permitiendo ver el fondo

El prefijo -webkit- sigue siendo necesario para garantizar compatibilidad con algunos navegadores, aunque el soporte nativo ha mejorado considerablemente.

Recortando diferentes tipos de fondos

Esta técnica funciona con cualquier tipo de fondo que CSS soporte:

Con gradientes lineales

.texto-gradiente-lineal {
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
}

Con gradientes radiales

.texto-gradiente-radial {
  background: radial-gradient(circle at center, #ff4e50, #f9d423);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
}

Con imágenes de fondo

.texto-imagen {
  background-image: url('textura.jpg');
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
  font-weight: 900;
}

Mejorando la legibilidad

Cuando usamos background-clip: text, a veces el texto puede ser difícil de leer. Podemos mejorar la legibilidad con algunas técnicas:

.texto-legible {
  /* Fondo recortado */
  background: linear-gradient(45deg, #3498db, #2ecc71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Mejoras de legibilidad */
  font-weight: bold;
  font-size: 2.5rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
}

Combinando con text-stroke

Podemos añadir un contorno al texto para mejorar aún más la visibilidad:

.texto-contorno-recortado {
  background: linear-gradient(45deg, #ff9966, #ff5e62);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Añadimos contorno */
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
}

La propiedad -webkit-text-stroke añade un contorno fino alrededor de cada letra, ayudando a definir mejor los bordes del texto.

Efectos animados con background-clip

Podemos animar el fondo para crear efectos dinámicos mientras mantenemos el recorte:

.texto-animado {
  background: linear-gradient(90deg, #ff8a00, #e52e71, #ff8a00);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
  animation: gradiente 3s linear infinite;
}

@keyframes gradiente {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

Este ejemplo crea un efecto de gradiente que se desplaza continuamente a través del texto.

Texto con efecto de patrón

Podemos usar patrones repetitivos como fondo para crear efectos interesantes:

.texto-patron {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
  font-weight: 900;
}

Combinando con múltiples capas de fondo

Podemos crear efectos más complejos superponiendo varias capas de fondo:

.texto-multicapa {
  background: 
    linear-gradient(45deg, rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
    url('textura.jpg');
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3.5rem;
  font-weight: bold;
}

Efecto de texto con recorte de video

Una técnica avanzada es usar un video como fondo del texto:

.texto-video {
  background: black;
  font-size: 5rem;
  font-weight: 900;
  position: relative;
  color: transparent;
}

.texto-video::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('video-placeholder.jpg');
  -webkit-background-clip: text;
  background-clip: text;
}

Para implementar el video real, necesitaríamos JavaScript para actualizar el fondo con frames del video.

Efecto de texto con recorte y parallax

Podemos crear un efecto de parallax donde el fondo se mueve a una velocidad diferente al desplazamiento de la página:

.texto-parallax {
  background: url('paisaje.jpg');
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 5rem;
  font-weight: 900;
}

Compatibilidad y fallbacks

Aunque el soporte para background-clip: text ha mejorado, es buena práctica proporcionar alternativas para navegadores más antiguos:

.texto-compatible {
  /* Versión básica para todos los navegadores */
  color: #e52e71;
  
  /* Versión avanzada con recorte */
  background: linear-gradient(45deg, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Detectar soporte para background-clip */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .texto-compatible {
    color: transparent;
  }
}

Ejemplo práctico: Título con efecto de recorte de imagen

Veamos un ejemplo completo de un título con efecto de recorte de imagen:

.titulo-hero {
  font-family: 'Arial', sans-serif;
  font-size: 5rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 0.9;
  
  /* Efecto de recorte */
  background-image: url('paisaje-montaña.jpg');
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Mejoras visuales */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

Combinando con filtros CSS

Podemos aplicar filtros al fondo antes de recortarlo con el texto:

.texto-filtrado {
  background-image: url('imagen.jpg');
  background-size: cover;
  filter: saturate(150%) contrast(120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 4rem;
  font-weight: bold;
}

Consideraciones de rendimiento

Los efectos de recorte de texto pueden ser intensivos para el renderizado, especialmente en dispositivos móviles:

/* Versión simplificada para dispositivos móviles */
@media (max-width: 768px) {
  .texto-recortado-complejo {
    background: linear-gradient(45deg, #ff8a00, #e52e71);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Eliminamos animaciones y efectos adicionales */
    animation: none;
  }
}

La técnica de background-clip: text abre un mundo de posibilidades creativas para el diseño web. Desde títulos impactantes hasta efectos sutiles, esta propiedad nos permite crear experiencias visuales ricas sin depender de imágenes o gráficos externos para cada variación de texto, manteniendo la accesibilidad y la capacidad de selección del contenido.