Gradientes de CSS sin Stack Overflow — Creales Visualmente y Publíalos

Has abierto un nuevo archivo de CSS, escribió background:, y luego miró la pantalla. Sabes que quieres un gradiente. Sabes que la propiedad es linear-gradient. No recuerdas si el ángulo va primero o último, si los grados van en sentido horario o antihorario, o por qué los colores que escribiste no se ven como los que imaginaste.

Este es el artículo que soluciona eso. Cubriremos exactamente cómo funcionan los gradientes en CSS — la sintaxis, la lógica del ángulo y los patrones que realmente usarás — y te enlazaremos a un generador visual para que dejes de adivinar y comiences a entregar.

Cómo funciona realmente linear-gradient

La sintaxis básica es:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Esa direction es lo que confunde a las personas. Tienes dos opciones: una palabra clave o un ángulo en grados.

Palabras clave: to top, to bottom (predeterminado), to left, to right, y las diagonales: to top right, to bottom left, etc.

Grados: 0deg apunta hacia arriba (igual que to top). El ángulo aumenta en sentido horario, así que 90deg apunta a la derecha, 180deg apunta hacia abajo, 270deg apunta a la izquierda.

Aquí está el elemento que vale la pena memorizar: 0deg = hacia arriba, en sentido horario desde allí. Todo lo demás se deriva de eso.

Seis patrones que usarás esta semana

1. De arriba a abajo (por defecto)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Desvanecimiento hasta transparente

¿Quieres superponer texto sobre una imagen? Necesitas que la parte inferior sea oscura y la parte superior clara. Usa transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Una advertencia: evita transparent en Safari al pasar de un valor coloreado — interpola a través de negro. Usa rgba(r, g, b, 0) con los mismos valores RGB en su lugar.

3. Fondo hero con ángulo

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg es aproximadamente de esquina inferior izquierda a esquina superior derecha — un ángulo típico de portada de revista. Los gradientes multicolor como este se definen con porcentajes de posición después de cada color. Sin porcentaje, CSS los distribuye uniformemente.

4. Sombreado sutil de tarjetas

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Las tarjetas que usan color blanco puro parecen planas frente a una página blanca. Un gradiente casi imperceptible desde blanco puro hasta un gris muy claro les da profundidad sin que parezcan diseñadas. Este es el gradiente que nadie nota, y eso es el punto.

5. Superposición en botones

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Los gradientes de izquierda a derecha (90deg) tienen un efecto dinámico. Combínalos con un estado de hover que cambie la posición del fondo (usando background-size: 200% y transición de background-position) para un efecto de deslizamiento suave en los botones.

6. Punto de color fuerte (sin mezcla)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Dos puntos de color en la misma posición crean una línea nítida sin mezcla. Útil para diseños de pantalla dividida, indicadores de progreso y patrones en rayas — todo sin necesidad de un elemento adicional o imagen.

Gradientes radiales: el otro

radial-gradient se extiende hacia afuera desde un punto central en lugar de moverse en una dirección:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

El primer argumento es la forma (circle o ellipse) seguido por la posición. at center es el valor predeterminado. Mueve el punto focal con at top left, at 30% 60%, etc. Los gradientes radiales son ideales para efectos de foco, botones brillantes y fondos radiales de páginas.

La sintaxis que nadie recuerda (y cómo nunca la olvidarás)

Las tres cosas que confunden a los desarrolladores, en orden de frecuencia:

• Ángulo antes de los colores — la dirección siempre viene primero, antes de cualquier punto de color.
• Grados horarios — 90deg es a la derecha, no hacia arriba. 0deg es hacia arriba.
• El tramo transparente a color — los navegadores mezclan a través de negro a menos que coincidan los valores RGBA en ambos extremos.

Si quieres evitar completamente el proceso de prueba y error, el Generador de degradado CSS en iotools.cloud te permite elegir colores visualmente, arrastrar puntos de color, invertir el ángulo y copiar el CSS final en un solo clic. Ya no necesitas adivinar qué 143deg parece.

Compatibilidad con navegadores

linear-gradient y radial-gradient son compatibles en todos los navegadores modernos — Chrome, Firefox, Safari y Edge los soportan sin prefijos. No necesitas -webkit- prefijos para la sintaxis estándar de gradientes en 2026.

La única excepción es la sintaxis antigua -webkit-linear-gradient usada por Safari 5.1 y Chrome 10–25. A menos que estés soportando navegadores de 2012, puedes ignorarla.

conic-gradient tiene fuerte soporte en navegadores modernos pero no tiene soporte para IE/antiguos — úsalo cuando el nivel mínimo de navegadores sea siempre actual.

Omite la sintaxis — genera visualmente

La sintaxis de gradientes en CSS no es complicada, pero es tediosa de ajustar a mano. El Generador de degradado CSS en iotools.cloud te da una vista previa en tiempo real, arrastrar puntos de color, controles de tipo para lineales o radiales, y copia en un solo clic. Construye tu gradiente visualmente, pega el resultado y entrega.

También te puede interesar