Coral Tide Diagonal

This smooth diagonal gradient moves from sandy cream through peach, coral orange, warm brown, sea green, and deep teal. Linear gradient, 32 colors at 30°: #fde1b4, #fa9046, #af6729, #135e5e, #032e26. Edit and export CSS, SVG, PNG or a shader.

5 editable OKLCH keyframes.

#fde1b4
#fddbaa
#fed39c
#ffc98c
#ffbe7d
#ffb26e
#ffa65e
#fe9a4e
#fa9046
#f58843
#ee8044
#e67947
#dd7349
#d36e48
#c86a43
#bc6839
#af6729
#9c6a17
#836e14
#657028
#46703f
#2a6c50
#18655b
#135e5e
#13565b
#114f54
#0d484c
#094243
#053c39
#043631
#03322a
#032e26

CSS

background: linear-gradient(30deg in oklch, oklch(92.13% 0.0661 78.75) 0.0%, oklch(90.84% 0.0741 76.54) 3.2%, oklch(89.12% 0.0856 73.41) 6.5%, oklch(87.07% 0.0991 69.67) 9.7%, oklch(84.79% 0.1109 65.63) 12.9%, oklch(82.40% 0.1236 61.63) 16.1%, oklch(79.97% 0.1372 57.97) 19.4%, oklch(77.63% 0.1502 54.99) 22.6%, oklch(75.46% 0.1551 52.91) 25.8%, oklch(73.34% 0.1561 50.25) 29.0%, oklch(71.20% 0.1542 46.94) 32.3%, oklch(69.06% 0.1501 43.78) 35.5%, oklch(66.91% 0.1444 41.55) 38.7%, oklch(64.77% 0.1377 41.02) 41.9%, oklch(62.63% 0.1308 42.99) 45.2%, oklch(60.51% 0.1242 48.24) 48.4%, oklch(58.40% 0.1183 57.88) 51.6%, oklch(56.30% 0.1116 73.68) 54.8%, oklch(54.21% 0.1042 94.09) 58.1%, oklch(52.13% 0.0965 117.09) 61.3%, oklch(50.06% 0.0887 140.68) 64.5%, oklch(47.98% 0.0812 162.84) 67.7%, oklch(45.91% 0.0745 181.58) 71.0%, oklch(43.83% 0.0687 194.87) 74.2%, oklch(41.68% 0.0642 201.52) 77.4%, oklch(39.34% 0.0605 203.14) 80.6%, oklch(36.92% 0.0573 201.00) 83.9%, oklch(34.52% 0.0548 196.30) 87.1%, oklch(32.24% 0.0527 190.23) 90.3%, oklch(30.18% 0.0510 184.02) 93.5%, oklch(28.46% 0.0495 178.87) 96.8%, oklch(27.17% 0.0482 175.97) 100.0%);

In these collections

Coastal gradients