Diseño con degradados: 25 ideas para posts, diapositivas y marcas

El diseño con degradados consiste en usar mezclas de color como parte estructural de una composición, no solo como relleno de fondo. Cada idea de abajo le da una tarea al degradado: señalar, separar, crear un ambiente o hacerse reconocer. Están agrupadas según dónde las usarás (posts, diapositivas, marcas y web) y cada una trae la composición o el código para probarla.

Si primero necesitas colores, empieza por las combinaciones de colores para degradados y vuelve después para decidir qué hacer con ellos.

Ideas de diseño con degradados para posts

1. Titular en foco. Una línea corta sobre la zona más brillante de un resplandor radial. La luz indica dónde leer.
2. Cartel de una palabra. Una sola palabra grande sobre un fondo rico. Solo funciona si la palabra se gana el espacio, así que elige un verbo o un nombre.
3. Campo dividido. Dos degradados que se encuentran en un borde duro, uno para el titular y otro para el detalle. El borde se convierte en una línea de composición.
4. Tarjeta de dato. Un número grande sobre un degradado calmo con una explicación de una línea. Mantén el fondo tranquilo para que domine la cifra.

1. Post de pregunta. Una pregunta como titular, con la respuesta prometida en el pie de foto. Los degradados encajan porque se sienten abiertos y no terminados.
2. Cita sobre un fondo suave. Una cita corta sobre un degradado de poco contraste, con la autoría pequeña. La suavidad se lee como algo cuidado; un color duro pelea con las palabras.
3. Serie de cuenta atrás. El mismo degradado, algunos grados más cálido cada día hasta el lanzamiento. La serie parece planificada y el cambio genera expectación.
4. Foto en duotono. Una foto adaptada a los dos colores extremos de tu degradado, para que la fotografía y el fondo se pertenezcan. Mira el duotono.

Ideas de diseño con degradados para diapositivas

1. Diapositiva de título con horizonte. Una parte superior oscura que se funde en una franja iluminada cerca del borde inferior, con el título justo encima. Se lee como un amanecer y da un comienzo a la charla.
2. Separadores de sección en secuencia. Cada separador da el siguiente paso de un mismo recorrido de tono. La gente sabe cuánto queda de la presentación sin barra de progreso.
3. Diapositivas de datos tranquilas. Las diapositivas de contenido y de gráficos usan una versión casi plana del mismo degradado, para que los datos lleven el color. Los fondos para presentaciones tratan el contraste del texto.
4. Diapositiva final en espejo. La última diapositiva invierte el degradado de la de título, de arriba abajo. Cierra el círculo a la vista.
5. De claro a oscuro. Empieza claro y termina oscuro, o al revés, si tu charla va del problema a la respuesta. El color apoya la historia sin hacer ruido.
6. Marco, no relleno. Un borde fino de degradado alrededor de un área de contenido neutra mantiene legible una diapositiva densa sin salirse de la marca.

Ideas de diseño con degradados para marcas

1. Un degradado insignia y un color de reserva. Elige una mezcla y un color plano tomado de ella para favicons y para impresión a un solo color.
2. Una familia para las líneas de producto. Conserva la estructura y el ángulo y dale a cada línea su propio tono. La familia sigue siendo reconocible y cada producto se distingue.
3. Degradado solo detrás del logotipo. Usa el degradado en un único lugar, el conjunto del logotipo o el icono de la app, y color plano en el resto. La escasez lo hace memorable.
4. Cambios de temporada. Lleva el mismo degradado un poco más cálido en verano y más frío en invierno, sin cambiar su estructura.
5. El degradado como material. Añade grano, un brillo de seda o la textura del papel para que el degradado parezca una superficie. La textura es más difícil de copiar que el color.
6. Piezas impresas. Lleva el degradado a tarjetas, pegatinas y envases, planificado para tinta. Los degradados para impresión explican qué cambia en papel.

Las ideas para marcas solo funcionan con coherencia: los mismos colores, ángulo y textura en todos los formatos. El degradado como marca explica cómo hacerlo tuyo en vez de tomarlo prestado.

Ideas de diseño con degradados para webs y movimiento

1. Resplandor de portada. Un resplandor radial suave detrás de una captura del producto lo separa de la página sin necesidad de sombra.
2. Una palabra con degradado. Aplica un degradado a una sola palabra de un titular, nunca a todo el párrafo. Mira el texto con degradado.
3. Bucle de deriva lenta. Un fondo que se mueve tan despacio que solo se nota pasados unos segundos. Se siente vivo sin competir con las palabras.
4. Bordes de degradado en tarjetas. Un borde de degradado de 1 o 2 píxeles alrededor de tarjetas por lo demás planas da a la página una firma con casi ningún peso visual.
5. Cambio de color al desplazarse. Cada sección de una página larga descansa sobre el siguiente paso de un mismo degradado, así que desplazarse se siente como moverse por la luz.

.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Cómo elegir la idea adecuada

Elige la idea que encaje con la tarea y úsala con coherencia durante un tiempo. Un degradado repetido en veinte posts hace más que veinte degradados ingeniosos usados una vez. Para paletas por sector, mira las ideas de degradados por sector.