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

[Canonical HTML page](https://gradiently.design/es/guide/fire-gradient)

Las llamas tienen un orden fijo de color, y un degradado de fuego solo parece caliente si lo sigue. Aquí tienes ese orden, códigos para cada tipo de fuego y un parpadeo que animas en pocas líneas.

## The short version

- Un degradado de fuego sigue el orden de una llama real: amarillo pálido cerca de la base, luego naranja, luego rojo en las puntas, que se apaga en humo oscuro.
- Las partes más calientes de un fuego se ven más pálidas, así que la parada más brillante va en el origen del calor, no en el borde.
- En CSS, `linear-gradient(0deg, …)` empieza abajo, que es donde empieza una llama.
- Las brasas y los carbones piden degradados radiales que brillan desde un centro caliente hacia el casi negro.
- El texto oscuro se lee sobre la parte amarilla de un degradado de fuego, y el texto blanco o crema se lee sobre las partes rojas y oscuras.

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.

| Zona | Color | Hex |
| --- | --- | --- |
| Núcleo de una llama de gas | Azul | `#38bdf8` a `#1d4ed8` |
| Base de una llama de leña | Amarillo pálido, casi blanco | `#fff3b0` |
| Cuerpo inferior | Amarillo dorado | `#ffd23f` |
| Centro | Naranja | `#ff8c1a` |
| Puntas | Rojo llama | `#e8361c` |
| Borde que se enfría | De carmesí a brasa | `#b3001b` a `#7f1d1d` |
| Humo y noche | Carbón vegetal | `#1c0606` |

Una llama como lista de paradas. La mayoría de los degradados de fuego usan cuatro o cinco de estas, en este orden.

- Calor blanco: #fff3b0
- Llama dorada: #ffd23f
- Llama naranja: #ff8c1a
- Rojo llama: #e8361c
- Carmesí: #b3001b
- Brasa: #7f1d1d
- Carbón vegetal: #1c0606

La paleta del fuego de la más caliente a la más fría. Fíjate en que no hay marrón: pasar del rojo al oscuro por un carmesí profundo lo mantiene brillante.

## 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.

- Hoguera, de la base a la punta: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Llamarada: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Calor blanco: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Azul de llama de gas: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Cuatro llamas. La azul rompe a propósito la regla cálida: una llama de gas limpia suele arder más caliente que una amarilla, y va mucho mejor con tecnología y ciencia que el naranja.

## 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.

- Brasas incandescentes: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Carbón al rojo: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Río de lava: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Fuego en reposo. El degradado de brasas brilla desde el borde inferior, lo que crea un escenario perfecto para un producto o un titular encima.

Si quieres calidez sin dramatismo, las colecciones aparte de [degradados rojos](https://gradiently.design/es/guide/red-gradient), [degradados naranja](https://gradiently.design/es/guide/orange-gradient) y [degradados amarillos](https://gradiently.design/es/guide/yellow-gradient) 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](https://gradiently.design/es/guide/muddy-gradients) explican por qué el rojo que se funde en negro puede volverse marrón, y cómo lo evita una parada carmesí.

### Parece falso

- Amarillo arriba, rojo abajo
- Rojo que se funde directamente en un negro parduzco
- Un amarillo limón frío con matiz verde
- Color uniforme de borde a borde, sin punto caliente
- Colores de llama sobre fondo blanco

### Parece caliente

- El color más pálido en el origen, rojo en las puntas
- De rojo a carmesí, y luego a carbón
- Un amarillo dorado cálido como #ffd23f
- Un núcleo brillante del que todo se desvanece
- Fuego que brilla desde la oscuridad

## 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](https://gradiently.design/es/guide/reduced-motion).

```css
.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; }
}
```

La llama sube y se asienta cada seis segundos. Animar `background-position` es barato; para efectos más pesados, consulta las notas de rendimiento en la guía de degradados animados.

Más bucles y sus compromisos están en [degradado animado en CSS](https://gradiently.design/es/guide/css-animated-gradient).

## 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.

Una publicación social vertical con fondo rojo y naranja cálido y el titular Últimas 48 horas en texto crema

Una publicación vertical de rebajas. La línea urgente va en el extremo oscuro de brasa; la luz más cálida queda lejos de las palabras.

Para más sobre composiciones que venden, consulta el [diseño de publicaciones de rebajas](https://gradiently.design/es/guide/sale-post-design). 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.

## FAQ

### ¿Qué colores hay en un degradado de fuego?

Amarillo pálido (#fff3b0), amarillo dorado (#ffd23f), naranja (#ff8c1a), rojo llama (#e8361c) y un carmesí profundo o carbón para terminar. Úsalos en ese orden desde la base de la llama.

### ¿En qué dirección debe ir un degradado de llama?

De abajo arriba, con el color más pálido en la base. En CSS, `linear-gradient(0deg, …)` enumera primero la parada inferior.

### ¿Cómo evito que un degradado de fuego se vuelva marrón?

Pasa del rojo a un carmesí profundo como #b3001b antes de llegar al casi negro, en lugar de ir directamente del rojo al negro.

### ¿Para qué sirve un degradado de llama azul?

Una llama de gas azul suele arder más caliente que una llama amarilla de leña, así que va bien con tecnología, ciencia, energía y todo lo que quiera sentirse intenso pero frío. Llévalo de casi blanco en la base, por azul cielo, a azul marino profundo.

### ¿Puedo animar un degradado de fuego sin JavaScript?

Sí. Haz el fondo el doble de alto con `background-size: 100% 200%`, anima `background-position` despacio y desactívalo con `prefers-reduced-motion`.