Degradado de fuego: códigos de llama, de brasa a hoguera

Un degradado de fuego va del amarillo pálido, casi blanco, en la base de la llama, pasando por un naranja intenso, a un rojo profundo en las puntas, y luego a la oscuridad del humo o de la noche. Sigue ese orden y el degradado se lee como calor al instante. Inviértelo, con el amarillo arriba, y parecerá un atardecer. Abajo tienes las zonas de la llama como colores, códigos copiables de brasas humeantes a una llamarada completa y un suave parpadeo en CSS.

Lee una llama de abajo arriba

El material incandescente cambia de color con la temperatura: cuanto más caliente, más pálido y blanco se ve, y al enfriarse pasa por el amarillo y el naranja hasta un rojo apagado. En un fuego de leña eso significa que la luz más pálida está abajo, cerca del combustible, y el rojo en las puntas que parpadean. Una llama de gas arde limpia, casi sin hollín incandescente, así que muestra la luz azul del propio gas que arde.

Códigos de degradado de llama: de la hoguera a la llamarada

Estos son verticales y empiezan abajo. En CSS, 0deg apunta hacia arriba, así que la primera parada es la base de la llama. Una hoguera mantiene una base dorada suave y un largo desvanecimiento a rojo; una llamarada es más corta, más llamativa y más saturada; el calor blanco es como se ve el interior de un horno.

Degradados de brasa, carbón y lava

No todo diseño de fuego necesita llamas. Las brasas y los carbones son fuego en reposo: sobre todo oscuros, con un núcleo caliente que brilla a través. Se sienten sugerentes y premium, y dejan más espacio tranquilo para las palabras que una llamarada. La lava queda entre los dos, una corteza oscura partida por una grieta brillante. Funcionan mejor como degradados radiales, que brillan hacia fuera como lo hace el calor.

Si quieres calidez sin dramatismo, las colecciones aparte de degradados rojos, degradados naranja y degradados amarillos toman cada una una parte de la llama y llegan más lejos con ella.

Por qué algunos degradados de fuego se ven mal

El fuego es uno de los pocos degradados que la gente juzga al instante, porque todos hemos mirado uno real. Tres errores lo delatan: el orden es incorrecto, el extremo oscuro se vuelve marrón, o el amarillo es tan verdoso que parece ácido y no calor. Los degradados turbios explican por qué el rojo que se funde en negro puede volverse marrón, y cómo lo evita una parada carmesí.

Un degradado de fuego animado en CSS

Una deriva lenta hacia arriba vende mejor la idea de llama que cualquier parpadeo rápido. Haz el degradado el doble de alto que el elemento y muévelo suavemente arriba y abajo. Respeta a los visitantes que han pedido menos movimiento, como se describe en movimiento reducido.

.fire {
  background: linear-gradient(0deg, #fff3b0 0%, #ffd23f 15%, #ff8c1a 35%, #e8361c 55%, #5c0d0d 80%, #1c0606 100%);
  background-size: 100% 200%;
  animation: flicker 6s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { background-position: 50% 100%; }
  to   { background-position: 50% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .fire { animation: none; }
}

Más bucles y sus compromisos están en degradado animado en CSS.

Palabras y ofertas sobre un degradado de fuego

El fuego dice urgencia, energía y calor, así que lleva de forma natural ventas flash, cartas picantes, retos de entrenamiento y todo lo que tenga fecha límite. El color del texto depende de dónde caen las palabras: un carbón profundo o un marrón brasa se lee sobre la base dorada, y el blanco o la crema cálida se leen sobre las partes rojas y oscuras. Evita poner palabras sobre el centro naranja, donde ninguno funciona especialmente bien.

Para más sobre composiciones que venden, consulta el diseño de publicaciones de rebajas. Si prefieres no maquetarlo a mano, el Designer de Gradiently puede tomar un encargo de una línea como «la liquidación de invierno termina el domingo», preguntar lo que necesite, escribir las palabras y componer la publicación con tu Mark, y luego crear también las versiones en story y cuadrada.