Northern Bloom Gradient
Teal and violet mesh blobs glowing over deep navy.
Customize this gradient → Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.
Color Stops
#64FFDA
#7C4DFF
#18FFFF
Background
#0A1F2E
#0A1F2E
Northern Bloom CSS Code
background: #0A1F2E; background: radial-gradient(at 67% 79%, #64FFDA, transparent 70%), radial-gradient(at 16% 50%, #7C4DFF, transparent 70%), radial-gradient(at 67% 21%, #18FFFF, transparent 70%), #0A1F2E; background: radial-gradient(at 67% 79% in oklch, oklch(90.77% 0.1414 174.34), transparent 70%), radial-gradient(at 16% 50% in oklch, oklch(57.86% 0.2468 288.24), transparent 70%), radial-gradient(at 67% 21% in oklch, oklch(90.64% 0.1527 194.8), transparent 70%), oklch(23.04% 0.0397 242.31);
The same gradient with its colors in OKLCH. Older browsers show the standard version. How OKLCH gradients work →
Similar Gradients
More Gradient Presets
FAQ
What is the Northern Bloom gradient?
Teal and violet mesh blobs glowing over deep navy.
What's the CSS code for the Northern Bloom gradient?
Use background: radial-gradient(at 67% 79%, #64FFDA, transparent 70%), radial-gradient(at 16% 50%, #7C4DFF, transparent 70%), radial-gradient(at 67% 21%, #18FFFF, transparent 70%), #0A1F2E;. RGBA and HSLA versions are also available on this page.