Navy to Gold Gradient — CSS, Hex and Angles
Navy and brass: the classic institutional pairing that still looks expensive on screen. The pair is #1E3A8A → #F59E0B, and on a 135° axis it reads as a diagonal wash. Everything below is generated from those two values, so the CSS you copy is exactly what the previews render.
Copy the CSS
.gradient {
background: #1E3A8A; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%);
background: -moz-linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%);
background: linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%);
}const gradientStyle = {
background: '#1E3A8A', // fallback
backgroundImage: 'linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%)',
};The two endpoints
| Name | Hex | RGB | HSL | vs white | vs black | |
|---|---|---|---|---|---|---|
| Navy | #1E3A8A | rgb(30, 58, 138) | hsl(224, 64%, 33%) | 10.36:1 | 2.03:1 | |
| Gold | #F59E0B | rgb(245, 158, 11) | hsl(38, 92%, 50%) | 2.15:1 | 9.78:1 |
The midpoint is #8a6c4b (rgb(138, 108, 75), saturation 30%). That is well below the 78% the two ends average, which is the grey-band problem in one line.
What each angle does
| Angle | Direction | Function value |
|---|---|---|
| 0° | bottom → top | linear-gradient(0deg, #1E3A8A 0%, #F59E0B 100%) |
| 45° | bottom-left → top-right | linear-gradient(45deg, #1E3A8A 0%, #F59E0B 100%) |
| 90° | left → right | linear-gradient(90deg, #1E3A8A 0%, #F59E0B 100%) |
| 135° | top-left → bottom-right | linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%) |
| 180° | top → bottom | linear-gradient(180deg, #1E3A8A 0%, #F59E0B 100%) |
| 225° | top-right → bottom-left | linear-gradient(225deg, #1E3A8A 0%, #F59E0B 100%) |
| 270° | right → left | linear-gradient(270deg, #1E3A8A 0%, #F59E0B 100%) |
| 315° | bottom-right → top-left | linear-gradient(315deg, #1E3A8A 0%, #F59E0B 100%) |
The same pair as linear, radial and conic
| Type | Function value |
|---|---|
| linear | linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%) |
| radial | radial-gradient(circle at 50% 50%, #1E3A8A 0%, #F59E0B 100%) |
| conic | conic-gradient(from 0deg at 50% 50%, #1E3A8A 0%, #F59E0B 100%) |
Frequently asked
What is the CSS for a navy to gold gradient?background: linear-gradient(135deg, #1E3A8A 0%, #F59E0B 100%); — #1E3A8A at 0% and #F59E0B at 100%, on a 135° axis. Swap 135deg for to right if you want the direction to follow the element ratio instead of a fixed angle.
Does it need vendor prefixes?
Not for current browsers. Unprefixed linear-gradient has been supported everywhere for years, and the -webkit- / -moz- lines only matter for stacks that still ship to browsers older than 2013. The generator emits both, plus a solid #1E3A8A fallback.
Why would the middle look muddy?
This pair does pass through a desaturated middle. Navy and Gold sit far enough apart on the hue wheel that a straight sRGB blend lands near grey (midpoint #8a6c4b, saturation 30% against 78% at the ends). Add a saturated third stop, or interpolate in oklch.
Can I put text straight onto it?
Check both ends, not the average. White text clears 4.5:1 against the navy end and black text clears it against neither end. Measured ratios: Navy is 10.36:1 on white and 2.03:1 on black; Gold is 2.15:1 on white and 9.78:1 on black.