Skip to content
Musterli

Vivid

Neon Night gradient

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

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 5.9:1

  2. Color 2

    Text in white, contrast 6.8:1

  3. Color 3

    Text in black, contrast 8.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: #e73dcd;
background-image: linear-gradient(120deg, #e73dcd 0%, #e43cce 5.56%, #d93bd2 11.11%, #ca39d7 16.67%, #b636db 22.22%, #a134de 27.78%, #8d32df 33.33%, #7d30de 38.89%, #722edd 44.44%, #6e2edc 50%, #6b35df 55.56%, #6048e5 61.11%, #4b60eb 66.67%, #2679ec 72.22%, #0090df 77.78%, #00a1d6 83.33%, #00aed2 88.89%, #00b7d0 94.44%, #14b9cf 100%);
background-image: linear-gradient(120deg in oklch, #e73dcd 0%, #e43cce 5.56%, #d93bd2 11.11%, #ca39d7 16.67%, #b636db 22.22%, #a134de 27.78%, #8d32df 33.33%, #7d30de 38.89%, #722edd 44.44%, #6e2edc 50%, #6b35df 55.56%, #6048e5 61.11%, #4b60eb 66.67%, #2679ec 72.22%, #0090df 77.78%, #00a1d6 83.33%, #00aed2 88.89%, #00b7d0 94.44%, #14b9cf 100%);

Tailwind

bg-[#e73dcd] bg-[linear-gradient(120deg,_#e73dcd_0%,_#e43cce_5.56%,_#d93bd2_11.11%,_#ca39d7_16.67%,_#b636db_22.22%,_#a134de_27.78%,_#8d32df_33.33%,_#7d30de_38.89%,_#722edd_44.44%,_#6e2edc_50%,_#6b35df_55.56%,_#6048e5_61.11%,_#4b60eb_66.67%,_#2679ec_72.22%,_#0090df_77.78%,_#00a1d6_83.33%,_#00aed2_88.89%,_#00b7d0_94.44%,_#14b9cf_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

  • 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.

  • Northern Lights

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

  • Kingfisher

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

  • Observatory

    A deep night blue that lightens from the top.