Aurora Borealis

Aurora Borealis is a three-stop linear gradient that moves from near-black midnight through deep teal to a lighter teal. It works for hero sections on dark product sites, fintech landing pages, and any surface where you want depth without neon. Because the lightest stop is still fairly dark, the gradient keeps its calm character even when it stretches across a full viewport.

Text that sits on this gradient should be near-white, and it passes AA on the lighter third of the ramp better than on the dark end. For buttons, prefer a solid surface behind them instead of laying them directly on the gradient. The 135 degree angle reads diagonally from top-left, which suits wide hero panels; if you rotate the angle to run it top-to-bottom, the darkest area moves to the top and the lighter teal settles at the bottom for a grounded footer.

To ship the gradient, start from the CSS block on this page, which carries the three stops at 0, 50, and 100 percent. The middle stop at #203A43 is what keeps the sweep smooth; dropping it makes the transition from midnight to teal feel sudden. On a dark hero, put the gradient on the section background and give any card above it a solid dark surface so overlaying text keeps its contrast. The SVG export keeps the identical stops, so the same gradient can move from this page into a design tool without rework.