Tokyo NightLinear · 3 stops
Blue CSS gradients
Browse blue CSS gradients from aqua and sky through cobalt to indigo, with linear and radial examples. These 24 selected examples come from the existing gradient library.
Use this gradient.
Blue blends read as calm backgrounds and as strong primary-action fills. Use a lighter aqua-to-sky blend behind content and a deeper cobalt-to-indigo blend for emphasis.
Text over gradients.
Sky and aqua stops are light; cobalt and indigo stops are dark. White text that passes on the indigo end can fail on the aqua end, so check both ends and the midpoint.
CSS for Violet & Glacier
background: linear-gradient(180deg, #2E3F66 0%, #727DE6 60%, #60D4E6 100%);
background: linear-gradient(180deg in oklab, #2E3F66 0%, #727DE6 60%, #60D4E6 100%);The first declaration supplies an sRGB fallback; the second interpolates in OKLab. Create a gradient with your own colours and stops.
Compare ocean palettes · Navy Blue palettes · Browse all gradients