Blue lavender and pink angular gradient

Seamless navy, blue, pink and purple color palette

Midnight navy moves through royal blue and bright lavender into rosy pink, then returns through smoky violet to the same dark starting color. Angular gradient, 48 colors at 225°: #171d3a, #216ecc, #d27dfe, #c963a7, #171d3a. Edit and export CSS, SVG, PNG or a shader.

4 editable OKLCH keyframes.

#171d3a
#192040
#1b2448
#1d2952
#202f5d
#223569
#233c76
#244484
#244d93
#2355a2
#225eb0
#2166bf
#216ecc
#2475d9
#2a7be5
#347fef
#4182f8
#5284ff
#6687ff
#7a88ff
#8c89ff
#9e89ff
#af87ff
#c083ff
#d27dfe
#e07bf4
#ea7ae9
#f278dd
#f777d1
#f976c7
#f974be
#f573b7
#ef70b2
#e56cae
#d868aa
#c963a7
#b75da2
#a4579c
#915195
#7d4a8c
#6a4382
#583d77
#48366b
#3a305f
#2e2a54
#242549
#1c2041
#171d3a

CSS

background: conic-gradient(from 225deg in oklch, oklch(24.02% 0.0565 272.81) 0.0%, oklch(25.44% 0.0615 272.16) 2.1%, oklch(27.23% 0.0679 271.08) 4.3%, oklch(29.35% 0.0755 269.66) 6.4%, oklch(31.74% 0.0841 267.98) 8.5%, oklch(34.35% 0.0936 266.15) 10.6%, oklch(37.12% 0.1036 264.24) 12.8%, oklch(40.01% 0.1139 262.35) 14.9%, oklch(42.96% 0.1245 260.57) 17.0%, oklch(45.93% 0.1350 258.99) 19.1%, oklch(48.86% 0.1451 257.69) 21.3%, oklch(51.69% 0.1549 256.78) 23.4%, oklch(54.38% 0.1639 256.33) 25.5%, oklch(56.88% 0.1719 256.44) 27.7%, oklch(59.14% 0.1789 257.19) 29.8%, oklch(61.09% 0.1845 258.68) 31.9%, oklch(62.72% 0.1886 261.04) 34.0%, oklch(64.27% 0.1904 264.68) 36.2%, oklch(65.79% 0.1812 269.56) 38.3%, oklch(67.27% 0.1741 275.46) 40.4%, oklch(68.68% 0.1697 282.18) 42.6%, oklch(70.00% 0.1689 289.50) 44.7%, oklch(71.20% 0.1724 297.22) 46.8%, oklch(72.26% 0.1814 305.12) 48.9%, oklch(73.16% 0.1962 312.99) 51.1%, oklch(73.87% 0.1946 320.63) 53.2%, oklch(74.37% 0.1926 327.82) 55.3%, oklch(74.63% 0.1901 334.36) 57.4%, oklch(74.63% 0.1872 340.03) 59.6%, oklch(74.34% 0.1839 344.62) 61.7%, oklch(73.75% 0.1803 347.92) 63.8%, oklch(72.83% 0.1764 349.72) 66.0%, oklch(71.48% 0.1719 349.86) 68.1%, oklch(69.54% 0.1663 348.45) 70.2%, oklch(67.05% 0.1596 345.68) 72.3%, oklch(64.12% 0.1521 341.75) 74.5%, oklch(60.82% 0.1438 336.83) 76.6%, oklch(57.23% 0.1350 331.13) 78.7%, oklch(53.43% 0.1259 324.84) 80.9%, oklch(49.53% 0.1165 318.14) 83.0%, oklch(45.58% 0.1072 311.23) 85.1%, oklch(41.69% 0.0980 304.29) 87.2%, oklch(37.92% 0.0892 297.52) 89.4%, oklch(34.38% 0.0809 291.10) 91.5%, oklch(31.13% 0.0733 285.23) 93.6%, oklch(28.26% 0.0666 280.10) 95.7%, oklch(25.86% 0.0609 275.90) 97.9%, oklch(24.02% 0.0565 272.81) 100.0%);

In these collections

Hero section gradients