Cómo crear degradados CSS

linear-gradient. El más común. Una transición de color a lo largo de una línea recta. Puedes controlar la dirección (arriba a abajo, izquierda a derecha, ángulo personalizado) y añadir tantos stops de color como desees.

radial-gradient. Los colores se irradian desde un punto central hacia el exterior, en círculo o elipse. Perfecto para crear efectos de luz, botones luminosos o fondos sutiles.

conic-gradient. Los colores giran alrededor de un punto central, como sectores de una rueda cromática. Ideal para gráficos circulares, medidores o efectos arcoíris.

repeating-linear-gradient / repeating-radial-gradient. Versiones que se repiten, perfectas para crear patrones de rayas o texturas.

Colores análogos. Elige colores adyacentes en la rueda cromática (azul → violeta, naranja → rojo). Las transiciones son naturalmente armoniosas y suaves.

Colores complementarios. Colores opuestos en la rueda (azul → naranja). Atención: la transición directa puede crear una zona grisácea en el medio. Añade un color intermedio para evitarlo.

Monocromo. Variaciones del mismo tono (azul claro → azul oscuro). Siempre elegante y profesional. Perfecto para fondos sutiles.

Evita transiciones abruptas. Cuanto más alejados están los colores en la rueda, más stops intermedios necesitas para suavizar la transición.

Consejo pro: usa el espacio de color oklch() para transiciones perceptualmente uniformes. Los degradados en oklch son más naturales que en RGB.

Paso 1: Elige el tipo. Lineal, radial o cónico. Cada tipo tiene sus propias opciones de personalización.

Paso 2: Selecciona tus colores. Usa el selector de colores para elegir tus stops. Añade, elimina o reordena stops con un clic.

Paso 3: Ajusta dirección y posiciones. Cambia el ángulo, punto de partida y posición exacta de cada stop para un control total.

Paso 4: Copia el código CSS. El código CSS se genera en tiempo real. Cópialo y pégalo directamente en tu hoja de estilos.

Vista previa en vivo, historial de degradados y sugerencias de paletas populares incluidos.

Fondos de secciones. Un degradado sutil entre dos tonos cercanos añade profundidad sin distraer del contenido. Es el uso más común en diseño web moderno.

Botones y CTA. Un degradado hace los botones más dinámicos y atractivos que un color plano. Añade un ligero cambio de degradado en hover para un efecto satisfactorio.

Texto en degradado. Con background-clip: text, puedes aplicar un degradado directamente al texto. Muy tendencia para títulos y logos.

Overlays sobre imágenes. Un degradado semitransparente sobre una imagen mejora la legibilidad del texto superpuesto.

Bordes. Border-image con degradado crea bordes coloridos imposibles con border-color clásico.

Los degradados CSS son eficientes. A diferencia de las imágenes, son vectoriales (sin pixelación), ligeros (unos bytes de código vs KB de imagen) y renderizados por GPU.

Prefiere CSS sobre imágenes. Un degradado CSS es siempre más rápido de cargar y más nítido que una imagen de degradado. También se adapta naturalmente a todos los tamaños de pantalla.

Limita el número de stops. Más de 4-5 stops hace el código complejo y la previsualización difícil. Para degradados muy complejos, considera SVG.

Prueba en móvil. Los degradados pueden verse diferentes en pantallas OLED vs LCD. Siempre prueba en varios tipos de pantalla.

Accesibilidad. Asegúrate de que el texto sobre un fondo degradado sea legible en todos los puntos. Verifica el contraste WCAG en cada extremo.