Green and blue gradients: fresh codes that feel natural

A green and blue gradient blends two cool neighbours: greens like emerald #10b981 or mint #a7f3d0 and blues like #0284c7 or sky #bae6fd, with teal and aqua forming the bridge between them. The blend stays clean because there is no grey point between the two hues. It feels natural because you have seen it all your life in water, ice and sky. The codes here follow four landscapes, with the text colours that read on each and CSS for light and dark mode.

Why green and blue look natural together

Green and blue are analogous colours: they sit next to each other on the wheel, so every step between them is a real colour, mostly teal and aqua. Nature shows the pairing constantly, from shallow seas where blue water runs over green weed and sand, to glacier lakes and pine forests reflected in still water. Borrowing from those scenes is the easiest way to make the gradient feel calm rather than corporate.

Lagoon: bright aqua and green gradients

Shallow tropical water is mostly aqua with green where it is shallowest and blue where it deepens. These gradients feel holiday bright. Add a warm sand stop if you want them to feel like a beach rather than a swimming pool.

Pine lake: deep green and blue gradients

Dark green running into dark blue feels quiet, expensive and trustworthy. Think of a forest lake at dusk, or the colour of an old bottle. These carry white text well and suit finance, outdoor gear, architecture and any brand that wants to feel steady.

Glacier: pale mint and sky gradients

Lift the pair right up and you get glacier ice and cold mornings: clean, airy and very calm. These suit healthcare, skincare, cleaning and productivity apps. They can feel clinical, so a touch of warm white helps.

Aurora: green and blue on a night sky

The northern lights are green and blue light on black, which is why aurora gradients are among the most loved dark backgrounds. Keep the colour in soft bands and let the dark ground hold most of the frame. Aurora gradients covers the full technique.

Text colours on green and blue gradients

Emerald and aqua are surprisingly light, so white text on the bright versions often fails. Deep teal ink works on light blends and keeps everything in one family; white and mint read well on the dark ones. Ratios below use the WCAG formula. Text on a gradient shows what to do when a line crosses both ends.

How to warm up a green and blue palette

Green and blue are both cool, so a whole brand in them can feel distant. One warm accent fixes it. Sand, coral and soft gold all sit across the wheel from teal, so use them beside the gradient, in a button, a logo or a sliver at one edge, rather than blending into them. Complementary colours explains why blending across the wheel goes grey.

Green and blue gradient CSS for light and dark mode

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Pairing a light and dark version of the same green and blue is a neat way to make a theme switch feel designed rather than inverted. Dark mode gradients goes deeper. In Gradiently, one Mark renders in every size you design and picks light or dark ink per line from its own palette, so lagoon brights and pine darks both keep their words readable.