Generador de degradados CSS: escríbelos a mano o con herramientas

Un generador de degradados CSS te da un valor de degradado para pegar, como linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), después de elegir los colores y un ángulo. Es un buen punto de partida. Pero un degradado CSS es lo bastante corto como para escribirlo a mano en menos de un minuto, y es en el código escrito a mano donde están las mejoras: una tercera parada, un espacio de color mejor, una segunda capa. Esta página muestra cómo leer lo que sale de un generador, limpiarlo y escribir el tuyo.

Las cuatro partes de todo degradado CSS

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Cada tipo tiene su propia guía: degradados lineales, degradados radiales y degradados cónicos.

Recetas de degradados para copiar

Están escritas a mano y no generadas, y cada una usa una idea que un generador básico rara vez te da: una luz descentrada, tres paradas en lugar de dos o un espacio de color elegido. Haz clic en cualquiera para copiarla.

Cómo limpiar el código de un generador

Pega desde un generador antiguo y puede que obtengas cinco líneas donde basta una. Los degradados con prefijo y el filtro de Internet Explorer llevan años sin hacer falta; añaden peso y, en el caso de la antigua sintaxis -webkit-, usan otro sistema de ángulos que confunde a quien edite después.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Tu navegador también es un generador bastante decente. Abre las herramientas para desarrolladores, selecciona el elemento y haz clic en cualquier muestra de color dentro del degradado en el panel Styles: obtienes un selector de color para esa parada, y puedes editar ángulos y porcentajes en el sitio mientras la página se actualiza en vivo. Copia el valor terminado de vuelta a tu hoja de estilos. Para ajustar un degradado frente a contenido real, eso supera a cualquier herramienta independiente, porque lo ves detrás de tu titular de verdad.

Cinco ajustes que superan a cualquier deslizador

1. 1

   Añade una parada intermedia

   Dos paradas dan una rampa recta. Un tercer color en torno al 50 o 60 por ciento añade profundidad y te deja controlar dónde ocurre el cambio.

2. 2

   Elige el espacio de color

   Añade in oklab para que las mezclas entre colores lejanos queden limpias, o in oklch para que el tono viaje. Interpolación de degradados muestra la diferencia.

3. 3

   Descentra la luz

   Cambia un degradado lineal por radial-gradient(circle at 80% 20%, ...) para que el color más luminoso venga de una esquina, como una fuente de luz.

4. 4

   Superpón dos o tres degradados

   Separa varios valores con comas en background-image. Unos brillos radiales sobre una base lineal se ven mucho más ricos que un solo degradado; degradados de malla en CSS lleva esto más lejos.

5. 5

   Añade un poco de grano

   Una capa de ruido tenue oculta el bandeado en degradados grandes y oscuros. El código está en textura de ruido en CSS.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Convertir un degradado en un token reutilizable

Cuando un degradado esté bien, ponle nombre. Una propiedad personalizada guarda el valor completo, así que los botones, los banners y la cabecera pueden compartirlo, y un rediseño toca una sola línea. Variables CSS para temas muestra cómo cambiar los tokens de degradado por marca o por modo.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Cuándo un generador no es la herramienta adecuada

Los generadores y el CSS escrito a mano comparten el mismo límite: el resultado es una lista de paradas que cualquiera puede leer en tu hoja de estilos y reutilizar. Para detalles de interfaz está bien. Para el fondo por el que te reconoce la gente, en tu web y en cada post, quizá quieras algo más rico y más difícil de copiar. El consejo más general está en cómo usar un generador de degradados.

Los Marks de Gradiently van más allá de lo que CSS puede describir: materiales superpuestos, luz, grano y movimiento, renderizados en vivo en cada tamaño, con un único propietario a la vez. Puedes diseñar gratis con cualquier Mark que no esté reservado y buscar en el Mercado con palabras de color para encontrar uno parecido al degradado que intentabas escribir.