Something went wrong. Try again.
CSS gradient visualizing historical temperature data, inspired by Ed Hawkins' Warming Stripes
Something went wrong. Try again.
warming-gradient warming-gradient.css
5.7 kB · 10 lines
CSS
at dev
1234567891011:root { --warming-gradient: linear-gradient( to right, #4292c6 0.00%, #4292c6 0.57%, #6baed6 0.57%, #6baed6 1.14%, #6baed6 1.14%, #6baed6 1.71%, #6baed6 1.71%, #6baed6 2.29%, #6baed6 2.29%, #6baed6 2.86%, #6baed6 2.86%, #6baed6 3.43%, #4292c6 3.43%, #4292c6 4.00%, #2171b5 4.00%, #2171b5 4.57%, #2171b5 4.57%, #2171b5 5.14%, #6baed6 5.14%, #6baed6 5.71%, #4292c6 5.71%, #4292c6 6.29%, #4292c6 6.29%, #4292c6 6.86%, #2171b5 6.86%, #2171b5 7.43%, #6baed6 7.43%, #6baed6 8.00%, #2171b5 8.00%, #2171b5 8.57%, #6baed6 8.57%, #6baed6 9.14%, #6baed6 9.14%, #6baed6 9.71%, #4292c6 9.71%, #4292c6 10.29%, #6baed6 10.29%, #6baed6 10.86%, #6baed6 10.86%, #6baed6 11.43%, #6baed6 11.43%, #6baed6 12.00%, #4292c6 12.00%, #4292c6 12.57%, #6baed6 12.57%, #6baed6 13.14%, #4292c6 13.14%, #4292c6 13.71%, #4292c6 13.71%, #4292c6 14.29%, #4292c6 14.29%, #4292c6 14.86%, #4292c6 14.86%, #4292c6 15.43%, #9ecae1 15.43%, #9ecae1 16.00%, #c6dbef 16.00%, #c6dbef 16.57%, #6baed6 16.57%, #6baed6 17.14%, #6baed6 17.14%, #6baed6 17.71%, #6baed6 17.71%, #6baed6 18.29%, #6baed6 18.29%, #6baed6 18.86%, #4292c6 18.86%, #4292c6 19.43%, #2171b5 19.43%, #2171b5 20.00%, #2171b5 20.00%, #2171b5 20.57%, #4292c6 20.57%, #4292c6 21.14%, #2171b5 21.14%, #2171b5 21.71%, #4292c6 21.71%, #4292c6 22.29%, #6baed6 22.29%, #6baed6 22.86%, #2171b5 22.86%, #2171b5 23.43%, #4292c6 23.43%, #4292c6 24.00%, #2171b5 24.00%, #2171b5 24.57%, #2171b5 24.57%, #2171b5 25.14%, #2171b5 25.14%, #2171b5 25.71%, #2171b5 25.71%, #2171b5 26.29%, #6baed6 26.29%, #6baed6 26.86%, #6baed6 26.86%, #6baed6 27.43%, #2171b5 27.43%, #2171b5 28.00%, #4292c6 28.00%, #4292c6 28.57%, #6baed6 28.57%, #6baed6 29.14%, #4292c6 29.14%, #4292c6 29.71%, #2171b5 29.71%, #2171b5 30.29%, #08519c 30.29%, #08519c 30.86%, #08519c 30.86%, #08519c 31.43%, #2171b5 31.43%, #2171b5 32.00%, #4292c6 32.00%, #4292c6 32.57%, #2171b5 32.57%, #2171b5 33.14%, #08519c 33.14%, #08519c 33.71%, #08519c 33.71%, #08519c 34.29%, #08519c 34.29%, #08519c 34.86%, #08519c 34.86%, #08519c 35.43%, #2171b5 35.43%, #2171b5 36.00%, #2171b5 36.00%, #2171b5 36.57%, #6baed6 36.57%, #6baed6 37.14%, #6baed6 37.14%, #6baed6 37.71%, #2171b5 37.71%, #2171b5 38.29%, #08519c 38.29%, #08519c 38.86%, #2171b5 38.86%, #2171b5 39.43%, #4292c6 39.43%, #4292c6 40.00%, #6baed6 40.00%, #6baed6 40.57%, #6baed6 40.57%, #6baed6 41.14%, #4292c6 41.14%, #4292c6 41.71%, #4292c6 41.71%, #4292c6 42.29%, #4292c6 42.29%, #4292c6 42.86%, #6baed6 42.86%, #6baed6 43.43%, #9ecae1 43.43%, #9ecae1 44.00%, #6baed6 44.00%, #6baed6 44.57%, #6baed6 44.57%, #6baed6 45.14%, #4292c6 45.14%, #4292c6 45.71%, #9ecae1 45.71%, #9ecae1 46.29%, #9ecae1 46.29%, #9ecae1 46.86%, #9ecae1 46.86%, #9ecae1 47.43%, #4292c6 47.43%, #4292c6 48.00%, #9ecae1 48.00%, #9ecae1 48.57%, #6baed6 48.57%, #6baed6 49.14%, #6baed6 49.14%, #6baed6 49.71%, #9ecae1 49.71%, #9ecae1 50.29%, #c6dbef 50.29%, #c6dbef 50.86%, #9ecae1 50.86%, #9ecae1 51.43%, #c6dbef 51.43%, #c6dbef 52.00%, #c6dbef 52.00%, #c6dbef 52.57%, #c6dbef 52.57%, #c6dbef 53.14%, #c6dbef 53.14%, #c6dbef 53.71%, #deebf7 53.71%, #deebf7 54.29%, #c6dbef 54.29%, #c6dbef 54.86%, #9ecae1 54.86%, #9ecae1 55.43%, #9ecae1 55.43%, #9ecae1 56.00%, #9ecae1 56.00%, #9ecae1 56.57%, #9ecae1 56.57%, #9ecae1 57.14%, #6baed6 57.14%, #6baed6 57.71%, #9ecae1 57.71%, #9ecae1 58.29%, #c6dbef 58.29%, #c6dbef 58.86%, #deebf7 58.86%, #deebf7 59.43%, #9ecae1 59.43%, #9ecae1 60.00%, #6baed6 60.00%, #6baed6 60.57%, #4292c6 60.57%, #4292c6 61.14%, #c6dbef 61.14%, #c6dbef 61.71%, #c6dbef 61.71%, #c6dbef 62.29%, #c6dbef 62.29%, #c6dbef 62.86%, #9ecae1 62.86%, #9ecae1 63.43%, #c6dbef 63.43%, #c6dbef 64.00%, #c6dbef 64.00%, #c6dbef 64.57%, #c6dbef 64.57%, #c6dbef 65.14%, #4292c6 65.14%, #4292c6 65.71%, #6baed6 65.71%, #6baed6 66.29%, #9ecae1 66.29%, #9ecae1 66.86%, #9ecae1 66.86%, #9ecae1 67.43%, #6baed6 67.43%, #6baed6 68.00%, #c6dbef 68.00%, #c6dbef 68.57%, #9ecae1 68.57%, #9ecae1 69.14%, #6baed6 69.14%, #6baed6 69.71%, #9ecae1 69.71%, #9ecae1 70.29%, #c6dbef 70.29%, #c6dbef 70.86%, #6baed6 70.86%, #6baed6 71.43%, #9ecae1 71.43%, #9ecae1 72.00%, #6baed6 72.00%, #6baed6 72.57%, #deebf7 72.57%, #deebf7 73.14%, #c6dbef 73.14%, #c6dbef 73.71%, #deebf7 73.71%, #deebf7 74.29%, #deebf7 74.29%, #deebf7 74.86%, #fee0d2 74.86%, #fee0d2 75.43%, #c6dbef 75.43%, #c6dbef 76.00%, #fee0d2 76.00%, #fee0d2 76.57%, #c6dbef 76.57%, #c6dbef 77.14%, #c6dbef 77.14%, #c6dbef 77.71%, #deebf7 77.71%, #deebf7 78.29%, #fee0d2 78.29%, #fee0d2 78.86%, #fee0d2 78.86%, #fee0d2 79.43%, #fee0d2 79.43%, #fee0d2 80.00%, #fcbba1 80.00%, #fcbba1 80.57%, #fcbba1 80.57%, #fcbba1 81.14%, #deebf7 81.14%, #deebf7 81.71%, #fee0d2 81.71%, #fee0d2 82.29%, #fee0d2 82.29%, #fee0d2 82.86%, #fcbba1 82.86%, #fcbba1 83.43%, #fee0d2 83.43%, #fee0d2 84.00%, #fc9272 84.00%, #fc9272 84.57%, #fb6a4a 84.57%, #fb6a4a 85.14%, #fcbba1 85.14%, #fcbba1 85.71%, #fcbba1 85.71%, #fcbba1 86.29%, #fc9272 86.29%, #fc9272 86.86%, #fb6a4a 86.86%, #fb6a4a 87.43%, #fb6a4a 87.43%, #fb6a4a 88.00%, #fc9272 88.00%, #fc9272 88.57%, #fb6a4a 88.57%, #fb6a4a 89.14%, #fb6a4a 89.14%, #fb6a4a 89.71%, #fb6a4a 89.71%, #fb6a4a 90.29%, #fc9272 90.29%, #fc9272 90.86%, #fb6a4a 90.86%, #fb6a4a 91.43%, #fb6a4a 91.43%, #fb6a4a 92.00%, #fc9272 92.00%, #fc9272 92.57%, #fb6a4a 92.57%, #fb6a4a 93.14%, #fb6a4a 93.14%, #fb6a4a 93.71%, #ef3b2c 93.71%, #ef3b2c 94.29%, #cb181d 94.29%, #cb181d 94.86%, #a50f15 94.86%, #a50f15 95.43%, #cb181d 95.43%, #cb181d 96.00%, #ef3b2c 96.00%, #ef3b2c 96.57%, #cb181d 96.57%, #cb181d 97.14%, #a50f15 97.14%, #a50f15 97.71%, #cb181d 97.71%, #cb181d 98.29%, #cb181d 98.29%, #cb181d 98.86%, #440007 98.86%, #440007 99.43%, #440007 99.43%, #440007 100.00% ); }
.warming-gradient { background: var(--warming-gradient);}