La versión corta
- Un degradado dorado realista va de una sombra marrón profunda, pasando por un tono medio ocre apagado, a un brillo crema pálido, y luego vuelve a la sombra.
- El oro se ve naranja cuando sus colores son demasiado saturados y rojizos, y se ve como amarillo plano cuando le faltan una sombra oscura y un brillo casi blanco.
- El oro metálico depende del contraste: las paradas más oscura y más clara deben estar muy separadas en luminosidad, con el brillo estrecho.
- En CSS, el texto dorado es un degradado lineal dorado recortado a las letras con background-clip: text.
- El oro se ve más precioso usado con moderación, sobre un fondo oscuro como negro, azul marino o verde profundo.
En esta página
Un degradado dorado parece metal de verdad cuando cubre un rango amplio de luminosidad: una sombra marrón profunda, un medio ocre apagado, un brillo crema pálido y estrecho, y de vuelta al marrón. El código clásico de partida es linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418). La mayoría de los degradados dorados fallan porque usan dos amarillos y naranjas brillantes sin sombra ni brillo reales, y se leen como pintura naranja y no como metal.
Códigos de degradado dorado que puedes copiar
Por qué tu degradado dorado se ve naranja
En pantalla, el oro es una ilusión hecha de contraste. No hay un píxel dorado, solo marrones y amarillos dispuestos para que el ojo lea una superficie reflectante. Cuando algo sale mal, suele salir mal de una de cuatro maneras.
Solución
Por qué
Solución
Por qué
Solución
Solución
El problema del naranja es el más común porque el amarillo que eliges en un selector de color suele parecer demasiado pálido, y la gente lo calienta. Resiste: mantén el tono medio en torno al ocre, más o menos donde el amarillo se encuentra con el marrón, y deja que el contraste ponga el brillo. Si lo que quieres en realidad es una mezcla cálida sencilla, degradado amarillo y degradado naranja tratan eso directamente.
Cómo iluminar el oro para que parezca real
- 1
Empieza por la sombra
Elige un marrón cálido y profundo. Debe ser lo bastante oscuro como para que el texto blanco se lea sobre él.
- 2
Añade un tono medio apagado
Un oro ocre, ligeramente desaturado. Es el color que la gente recordará, así que la mayor parte de la superficie se queda aquí.
- 3
Coloca un brillo estrecho
Un crema pálido en una banda fina, descentrada. Cuanto más estrecho, más brillante parece el metal.
- 4
Vuelve a la sombra
Vuelve a un ocre más oscuro tras el brillo, para que la luz se lea como un reflejo sobre una superficie curva.
- 5
Añade un segundo brillo, más débil
Opcional: un realce más suave cerca del extremo opuesto, como si una segunda luz rozara el borde. Hace que las formas planas se sientan redondeadas.
El oro refleja como cualquier metal pulido, así que se aplica la misma lógica del efecto de texto cromado, solo que más cálida y con transiciones más suaves. Los degradados dorados con tramos largos y sutiles pueden mostrar bandas tras la compresión; bandas en los degradados explica cómo lo evita un grano fino.
Texto dorado en CSS
.gold {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 8vw, 6rem);
color: #c79a3c; /* fallback */
background: linear-gradient(
135deg,
#5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
#c79a3c 58%, #7a5418 80%, #d6b062 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-rule {
height: 2px;
border: 0;
background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}Los degradados dorados encajan con tipografías serif y de alto contraste en tamaños grandes. Por debajo de unos 24 píxeles, la sombra y el brillo se difuminan en un marrón uniforme, así que compón el texto pequeño en un tono dorado sólido como #c79a3c y comprueba su contraste con el fondo. Texto con degradado trata la compatibilidad de navegadores con la técnica de recorte.
Degradados dorados en impresión
Un degradado dorado es una imagen de metal, no metal. Impreso con tinta normal de cuatricromía sale como marrones y amarillos que sugieren brillo, lo cual está bien para folletos y carteles pero nunca es realmente reflectante. Para invitaciones, tarjetas de visita y packaging donde importa el brillo real, los impresores usan tintas metálicas o estampación en caliente, y tú entregas la zona dorada como una forma plana aparte en el arte final.
Si imprimes un degradado, espera que salga algo más oscuro y menos vivo que en pantalla. Aviva un poco el brillo, evita los tramos muy largos y sutiles que pueden formar bandas y pide una prueba antes de una tirada grande.
Diseñar con oro
El oro se lee como precioso cuando es escaso. Un borde fino, un monograma, una palabra en un titular, una línea divisoria: sobre un fondo oscuro de negro, azul marino, granate o verde profundo. Cubre un cartel entero de oro y se vuelve latón. Degradado negro y dorado tiene combinaciones para la pareja más clásica, y diseño de marca de lujo muestra cómo encaja el oro en una identidad contenida.
Una invitación de 5×7 pulgadas: un fondo oscuro con luz metálica cálida y palabras en un crema sereno.
Una publicación de joyería donde el oro aparece solo como luz sobre la superficie, nunca como un gran relleno plano.
Para un aspecto cálido que viva detrás de cada diseño en lugar de rehacerse cada vez, busca en el Mercado de Gradiently con palabras de color como «oro cálido» o «bronce». Cada Mark es un fondo vivo con luz y grano, que solo puede tener un propietario a la vez y mantiene su zona más tranquila detrás de tus palabras en cada tamaño.
Preguntas frecuentes
¿Cuál es el mejor código de degradado dorado?
Un buen punto de partida es linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418): sombra marrón, tono medio ocre, brillo pálido y de vuelta a la sombra.
¿Qué códigos hex forman un oro metálico?
Combina un bronce oscuro como #5c3d12, un oro viejo como #b8862b, un oro metálico como #c79a3c y un brillo pálido como #f3dc9a.
¿Por qué mi degradado dorado se ve naranja?
Los tonos medios son demasiado rojos y saturados. Desplázalos hacia el ocre amarillento, baja la saturación y añade una sombra marrón oscuro y un brillo crema pálido para el contraste.
¿Cómo hago texto dorado en CSS?
Aplica un degradado lineal dorado como fondo y luego usa background-clip: text y -webkit-text-fill-color: transparent, con un color dorado sólido como reserva.
¿Qué color combina mejor con el oro?
Negro, azul marino, verde profundo, granate y crema cálido. Los fondos oscuros hacen que el oro se vea más brillante y más precioso.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil