Skip to content
Musterli

Vivid

Northern Lights gradient

Green, turquoise and violet, like an aurora over a dark sky.

Customize in the editor

Change angle, shape and colors, then export as CSS, SVG or PNG.

Colors

The color stops of the gradient. Click a value to copy it.

  1. Color 1

    Text in black, contrast 12.8:1

  2. Color 2

    Text in black, contrast 6.0:1

  3. Color 3

    Text in white, contrast 10.8:1

Code

Paste the lines into your element's rule. The first line is a fallback color, the second the gradient for every browser, the third interpolates in OKLCH for modern browsers.

CSS

background-color: #5ee38b;
background-image: linear-gradient(160deg, #5ee38b 0%, #59e18d 5.56%, #4bdb91 11.11%, #35d297 16.67%, #18c69b 22.22%, #00b99e 27.78%, #00ac9d 33.33%, #00a29c 38.89%, #079b9a 44.44%, #0c9999 50%, #00969a 55.56%, #008e9b 61.11%, #00829c 66.67%, #00729f 72.22%, #0a5ea7 77.78%, #2f49a2 83.33%, #3f3799 88.89%, #462b91 94.44%, #48268e 100%);
background-image: linear-gradient(160deg in oklch, #5ee38b 0%, #59e18d 5.56%, #4bdb91 11.11%, #35d297 16.67%, #18c69b 22.22%, #00b99e 27.78%, #00ac9d 33.33%, #00a29c 38.89%, #079b9a 44.44%, #0c9999 50%, #00969a 55.56%, #008e9b 61.11%, #00829c 66.67%, #00729f 72.22%, #0a5ea7 77.78%, #2f49a2 83.33%, #3f3799 88.89%, #462b91 94.44%, #48268e 100%);

Tailwind

bg-[#5ee38b] bg-[linear-gradient(160deg,_#5ee38b_0%,_#59e18d_5.56%,_#4bdb91_11.11%,_#35d297_16.67%,_#18c69b_22.22%,_#00b99e_27.78%,_#00ac9d_33.33%,_#00a29c_38.89%,_#079b9a_44.44%,_#0c9999_50%,_#00969a_55.56%,_#008e9b_61.11%,_#00829c_66.67%,_#00729f_72.22%,_#0a5ea7_77.78%,_#2f49a2_83.33%,_#3f3799_88.89%,_#462b91_94.44%,_#48268e_100%)]

Take the gradient further

The same colors in other generators. Each card opens the editor with these colors.

Keep working with the colors

Turn the color stops into a palette or a full color scale.

How to use this gradient

Copy the CSS into the rule of the element that should carry the gradient, for example a section, a card or a button. For text on top, pick a text color with enough contrast on every color stop; the values next to the colors help you with that. In the editor you change angle, shape and easing and can also export the gradient as an image.

Similar gradients

All gradients

  • Kingfisher

    Bright blue with an orange accent, like the bird's plumage.

  • Neon Night

    Pink, violet and cyan like neon signs on a rainy night.

  • Parrot

    Lime green, turquoise and blue, loud and cheerful.

  • Hibiscus

    A radial blend from orange to vivid pink.

  • Carnival

    Yellow, red and violet, as colorful as a carnival parade.

  • Observatory

    A deep night blue that lightens from the top.