Skip to content

Grabient palettes

Teal Cyan Violet Halo

Light blue, purple, navy and lavender color palette

This radial gradient moves from the center outward through teal, vivid cyan, violet, deep cyan, muted blue, and pale violet. Linear gradient, 32 colors at 135°: #2ac9da, #693aa9, #092862, #315466, #f1d6fe. Edit and export CSS, SVG, PNG or a shader.

4 editable OKLCH keyframes.

  • #2ac9da
  • #17c1dc
  • #02b4de
  • #16a4e0
  • #3290de
  • #497ad8
  • #5a63cc
  • #644ebc
  • #693aa9
  • #692997
  • #651c8a
  • #5e1681
  • #53167c
  • #441979
  • #331e74
  • #20236c
  • #092862
  • #002d51
  • #002f47
  • #003245
  • #003747
  • #0c3d4c
  • #1e4656
  • #315466
  • #46637a
  • #5e7591
  • #7988a8
  • #959bc0
  • #b1add5
  • #cbbde6
  • #e1cbf4
  • #f1d6fe

CSS

background: linear-gradient(135deg in oklch, oklch(76.77% 0.1240 206.02) 0.0%, oklch(74.50% 0.1274 212.89) 3.2%, oklch(71.42% 0.1325 222.75) 6.5%, oklch(67.73% 0.1390 234.79) 9.7%, oklch(63.60% 0.1461 248.17) 12.9%, oklch(59.23% 0.1533 262.09) 16.1%, oklch(54.79% 0.1601 275.73) 19.4%, oklch(50.48% 0.1659 288.27) 22.6%, oklch(46.48% 0.1702 298.90) 25.8%, oklch(42.96% 0.1723 306.81) 29.0%, oklch(40.13% 0.1717 311.17) 32.3%, oklch(37.94% 0.1679 311.10) 35.5%, oklch(35.84% 0.1604 306.43) 38.7%, oklch(33.86% 0.1502 298.13) 41.9%, oklch(32.09% 0.1379 287.21) 45.2%, oklch(30.63% 0.1242 274.70) 48.4%, oklch(29.57% 0.1100 261.61) 51.6%, oklch(29.02% 0.0803 249.10) 54.8%, oklch(29.04% 0.0643 237.93) 58.1%, oklch(29.75% 0.0588 229.22) 61.3%, oklch(31.22% 0.0587 224.02) 64.5%, oklch(33.60% 0.0562 223.21) 67.7%, oklch(37.44% 0.0526 226.61) 71.0%, oklch(42.59% 0.0507 233.27) 74.2%, oklch(48.72% 0.0503 242.45) 77.4%, oklch(55.49% 0.0510 253.40) 80.6%, oklch(62.58% 0.0525 265.38) 83.9%, oklch(69.64% 0.0544 277.66) 87.1%, oklch(76.35% 0.0566 289.49) 90.3%, oklch(82.35% 0.0585 300.12) 93.5%, oklch(87.33% 0.0600 308.83) 96.8%, oklch(90.94% 0.0606 314.86) 100.0%);

In these collections

Blue and purple gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works