# App background gradients

Quiet background ramps spanning cool blue, warm cream, graphite violet, and sage for app screens and content areas.

- Page: https://grabient.com/app-background-gradients
- Palettes: 24
- Tags: app, background, gradients, blue, sage, cream, graphite, interface
- Collected by: Grabient
- Updated: 2026-09-21

## Palettes

1. [Monochrome gray to blue](https://grabient.com/kSyQDAzZa8zgZxS?steps=32&angle=180): linear gradient, `#bbbbbb` `#b8b9ba` `#b5b6ba` `#b1b3b9` `#acb0b9` `#a7adb8` `#a1aab7` `#9aa6b6` `#94a2b5` `#8d9fb3` `#869bb2` `#7e98b0` `#7794ae` `#7190ac` `#6b8daa` `#6589a7` `#6186a5` `#5e82a3` `#5a7ea0` `#587a9e` `#56759b` `#557198` `#546c94` `#536891` `#53638d` `#535f8a` `#535b86` `#535783` `#52547f` `#52517c` `#524e79` `#514c77`
2. [Gray to brown](https://grabient.com/kS0Q402Au8koPve?steps=32&angle=180): linear gradient, `#cdc3b8` `#ccc2b6` `#cac0b4` `#c9bdb1` `#c7bbaf` `#c5b8ac` `#c3b5a9` `#c1b2a6` `#beaea2` `#bcab9f` `#baa89c` `#b7a499` `#b5a196` `#b39e93` `#b19b90` `#af988d` `#ad958b` `#ab9389` `#a99086` `#a78d84` `#a58a81` `#a3877f` `#a1857d` `#9f827a` `#9d7f78` `#9b7d76` `#9a7b74` `#987872` `#967771` `#95756f` `#94736e` `#93726d`
3. [Pastel analogous gray, blue and teal](https://grabient.com/kUuxmm3p0-1ogvJTIL5A?style=angularGradient&steps=32&angle=315): angular gradient, `#95aebc` `#94aebe` `#91afc0` `#8fb0c3` `#8cb1c6` `#88b2c9` `#84b4cc` `#80b5ce` `#7cb6d0` `#77b7d2` `#73b7d2` `#6fb7d2` `#6bb8d0` `#67b8ce` `#64b7cc` `#60b7c8` `#5db7c5` `#5bb6c1` `#58b5bd` `#56b4b9` `#55b3b6` `#53b2b2` `#51b1af` `#4fafab` `#4eada8` `#4caca4` `#4baaa1` `#4aa89e` `#49a69b` `#48a499` `#47a396` `#47a295`
4. [Champagne and peach color palette](https://grabient.com/kS9gc88os_GmSPs?steps=32&angle=135): linear gradient, `#f8f4ed` `#f7f3ec` `#f6f2ea` `#f6f1e9` `#f5f0e7` `#f4eee4` `#f3ede2` `#f2ebdf` `#f1eadd` `#f0e8da` `#efe6d7` `#eee4d4` `#ede3d2` `#ece1cf` `#ebdfcc` `#eaddca` `#eadcc8` `#e9dac5` `#e8d8c3` `#e7d6c0` `#e6d4bd` `#e5d2bb` `#e4d0b8` `#e3ceb5` `#e2cdb3` `#e1cbb0` `#e1c9ae` `#e0c7ac` `#dfc6aa` `#dfc4a8` `#dec3a7` `#dec2a6`
5. [Near-black and blue app background palette](https://grabient.com/kUGRLUGZQ_KifPszFj8A?style=angularGradient&steps=40&angle=255): angular gradient, `#040209` `#04020a` `#05030c` `#06030e` `#070410` `#090513` `#0a0616` `#0c0719` `#0e081c` `#10091f` `#120b23` `#140d26` `#150f29` `#17102d` `#191230` `#1b1434` `#1d1637` `#1e183b` `#201a3f` `#221c43` `#241e48` `#25204c` `#27224f` `#292453` `#2a2756` `#2c295a` `#2d2b5c` `#2e2d5e` `#303060` `#313262` `#323464` `#343765` `#353966` `#373b66` `#383d67` `#3a3f67` `#3b4168` `#3c4368` `#3d4468` `#3e4569`
6. [Sage and stone app background palette](https://grabient.com/kaVhJ0Oo6_dUUPzjDL815JAT0OwMtiUCA?style=radialGradient&steps=64&angle=30): radial gradient, `#2c3c34` `#2d3e35` `#2f4037` `#304239` `#32453c` `#35493e` `#374c41` `#3a5044` `#3d5447` `#40584b` `#435d4e` `#476252` `#4b6756` `#506d5b` `#557360` `#5a7a66` `#60816b` `#668871` `#6b8e76` `#71957b` `#779a80` `#7c9f85` `#81a489` `#87a88e` `#8dac92` `#92b097` `#98b39b` `#9db6a0` `#a1b9a3` `#a5bba6` `#a8bca9` `#a9bdaa` `#aabeaa` `#a9bdaa` `#a7bca8` `#a5bba6` `#a2b9a3` `#9eb69f` `#99b39c` `#95b097` `#90ac93` `#8ba88f` `#86a48b` `#819f86` `#7c9a81` `#76947c` `#6f8d76` `#698671` `#63806b` `#5d7965` `#577360` `#526d5b` `#4d6757` `#496253` `#465e4f` `#425a4c` `#3f5548` `#3c5245` `#3a4e43` `#384b40` `#36483e` `#34453c` `#32433a` `#314139`
7. [Duotone teal to brown](https://grabient.com/kScDWdPJi6EMXt0?steps=32&angle=180): linear gradient, `#155c6f` `#145c6e` `#145d6e` `#135e6d` `#135f6c` `#13606a` `#136169` `#156268` `#166366` `#196464` `#1b6563` `#1f6561` `#22665f` `#26675d` `#29685b` `#2d6959` `#316956` `#366a54` `#3a6b52` `#406b4f` `#456c4c` `#4a6c4a` `#506c47` `#556c45` `#5b6c43` `#606c41` `#646c40` `#696c3f` `#6c6c3f` `#706c3e` `#736c3e` `#756c3f`
8. [Tan and mauve color palette](https://grabient.com/kSpRknP5I5aOOu8?steps=32&angle=180): linear gradient, `#a08a7b` `#9f887a` `#9e8678` `#9d8377` `#9c8075` `#9a7d73` `#987a71` `#96766f` `#94736e` `#926f6c` `#8f6b6b` `#8c6869` `#886468` `#856066` `#815d65` `#7d5963` `#795661` `#75525f` `#704e5c` `#6b4a59` `#654656` `#604253` `#5a3e4f` `#543a4b` `#4f3648` `#4a3244` `#452f41` `#402b3d` `#3c283a` `#382638` `#352435` `#332234`
9. [Brown, gray, teal and navy](https://grabient.com/kamzkm1gtFdWRyrLHcJuB9B6KaQgOlEGg?steps=32): linear gradient, `#a87655` `#a67c5a` `#a48463` `#a18c6f` `#9e937a` `#9c9882` `#989b87` `#929e8a` `#8aa08f` `#80a196` `#76a19c` `#6e9fa0` `#649ca1` `#5998a0` `#4c939e` `#3f8d9c` `#348698` `#297e93` `#1f758d` `#156b86` `#0b617e` `#045876` `#014e6d` `#004463` `#003a5a` `#013050` `#002746` `#001e3c` `#001531` `#000c27` `#00061f` `#000319`
10. [Stone and blue color palette](https://grabient.com/kUwRm5aos-_UHvt9gj6A?steps=32): linear gradient, `#a5b2c8` `#a6b3c9` `#a8b5ca` `#a9b7cc` `#acbacf` `#aebdd1` `#b1c0d3` `#b3c2d6` `#b6c5d8` `#b9c8db` `#bbcbdd` `#becedf` `#c1d0e1` `#c3d3e3` `#c6d6e5` `#c9d8e7` `#ccdbea` `#cfdeeb` `#d2e0ed` `#d5e3ef` `#d8e5f1` `#dbe8f2` `#deeaf4` `#e1edf5` `#e4eff7` `#e7f1f8` `#ebf4f9` `#eef6fb` `#f1f8fc` `#f4f9fd` `#f6fbfd` `#f8fcfe`
11. [Sage, gray and stone app background palette](https://grabient.com/kSXxRxT4y8vOIve?steps=32): linear gradient, `#34453b` `#37483d` `#3a4b40` `#3d4e43` `#415246` `#455649` `#4a5b4d` `#4f6051` `#546555` `#5a6a59` `#606f5d` `#667562` `#6c7a67` `#727f6b` `#788570` `#7e8a75` `#838f7a` `#8a957f` `#909a85` `#97a08b` `#9ea791` `#a5ad98` `#acb49f` `#b3baa5` `#bac0ac` `#c1c7b3` `#c8cdb9` `#ced2bf` `#d3d7c5` `#d8dcca` `#dde0ce` `#e0e3d2`
12. [Blue app background palette](https://grabient.com/kSVB29uhQ-8yWvy?steps=32): linear gradient, `#2c354a` `#2d364c` `#2e384e` `#2f3950` `#303b52` `#323d55` `#333f58` `#35425b` `#36445e` `#384761` `#3a4964` `#3c4c68` `#3e4f6b` `#3f516e` `#415471` `#435774` `#455977` `#475c7b` `#495f7e` `#4b6281` `#4e6585` `#506988` `#536c8c` `#556f8f` `#587293` `#5a7596` `#5d7899` `#5f7b9c` `#617e9f` `#6380a1` `#6482a4` `#6684a5`
13. [Teal color palette](https://grabient.com/kSjEKQzqg9NUwPe?style=radialGradient&steps=32&angle=270): radial gradient, `#0f818a` `#0e828a` `#0c838a` `#0a858a` `#08868a` `#06888a` `#058a8a` `#038b8a` `#038d8a` `#028f8a` `#03918a` `#04938a` `#059589` `#079789` `#099889` `#0b9a88` `#0e9c88` `#0f9d87` `#119e87` `#13a086` `#15a185` `#17a385` `#19a484` `#1ba683` `#1da782` `#20a882` `#22a981` `#24ab80` `#26ac7f` `#28ac7f` `#29ad7e` `#2bae7d`
14. [Blue color palette](https://grabient.com/ka7hulaKRBFTAwVATkDrrvAENJP5aNz7g?steps=32&angle=135): linear gradient, `#d3efff` `#c9ebff` `#bce6ff` `#addfff` `#9dd7ff` `#8dcfff` `#7dc6ff` `#6bbcff` `#59b1ff` `#47a5ff` `#3799fe` `#2a8dfa` `#1e80f6` `#1574f0` `#0f67ea` `#0c5ce1` `#0c51d6` `#0b47c5` `#093eb2` `#0837a1` `#073395` `#073494` `#07389c` `#0741ac` `#084cbf` `#0958d1` `#0d64de` `#1872e7` `#2681ee` `#3790f4` `#459df8` `#50a5fc`
15. [Monochrome blue to light blue](https://grabient.com/kUfs-7zso_-MoQNwFL-g?steps=32&angle=135): linear gradient, `#0042f8` `#0043fc` `#0147ff` `#064dff` `#0d54ff` `#155bff` `#1d61ff` `#2668fe` `#2e6efe` `#3774fe` `#3f7afe` `#487ffe` `#5285fe` `#5b8afe` `#6590fe` `#6f96ff` `#799bff` `#82a1ff` `#8aa6fe` `#92abfe` `#99b0fe` `#9fb5fe` `#a5b9fe` `#aabefe` `#afc2fe` `#b4c6fe` `#b8cafe` `#bccdfe` `#c0d0ff` `#c3d3ff` `#c6d5ff` `#c9d7ff`
16. [Peach and tan color palette](https://grabient.com/kUyiotxSC9W2Tw-wDL0g?steps=32): linear gradient, `#d7b596` `#d3af90` `#cda687` `#c69c7d` `#be9071` `#b68466` `#ae785c` `#a76e53` `#a1654c` `#9d5f47` `#9b5d45` `#9d5f46` `#a3664b` `#ab7254` `#b68060` `#c2906d` `#cda17c` `#d8b18b` `#e0be99` `#e6c8a4` `#e8ceaa` `#e5ccab` `#ddc5a5` `#d0b99c` `#c0a98e` `#ae977f` `#9b846f` `#88725f` `#766050` `#665142` `#5a4538` `#513d31`
17. [Blue and stone color palette](https://grabient.com/kSdYK7-YI9CUQQy?steps=32&angle=135): linear gradient, `#204dba` `#2455bd` `#2b60c2` `#356cc7` `#417acd` `#5089d4` `#6198da` `#73a7e1` `#87b6e7` `#9ac4ec` `#add1f1` `#c0ddf5` `#d0e6f7` `#ddedf9` `#e7f1f8` `#ecf2f6` `#edf0f1` `#e9eaea` `#e0e0e1` `#d4d5d5` `#c5c7c8` `#b5b7ba` `#a2a7ac` `#8f969d` `#7d848e` `#6a7480` `#596372` `#4a5466` `#3c475a` `#313b50` `#283248` `#222b42`
18. [Blue color palette](https://grabient.com/kYNh7BLBc_r-Vw3tBbr0Q0-6eHQi?steps=32): linear gradient, `#12172c` `#141b31` `#171f37` `#1b243f` `#202a48` `#253151` `#2b3659` `#323c60` `#3b3f66` `#45436b` `#4f486f` `#594e75` `#63577d` `#6f6588` `#7e7999` `#9091ac` `#a4a9be` `#b8bece` `#c6cdd8` `#cbd2db` `#c6cfd8` `#bbc5d1` `#aab8c6` `#98a9b9` `#8799ac` `#788b9e` `#6a7b8e` `#5b697a` `#4d5767` `#3f4754` `#343a45` `#2c303b`
19. [Aubergine Blush App Glow](https://grabient.com/kWPBbhMZXAcoTQJmisHeAVCA?style=radialGradient&steps=32&angle=0): radial gradient, `#241a28` `#281c2c` `#2c1f31` `#322337` `#38273e` `#402c45` `#47314c` `#4e3653` `#553c5a` `#5c4161` `#634867` `#6a4f6e` `#715674` `#785d7b` `#806582` `#886d89` `#907590` `#997e97` `#a2879e` `#ab91a6` `#b49bae` `#bda5b5` `#c5aebd` `#ccb7c4` `#d3bfca` `#dac7d0` `#e0ced6` `#e5d5db` `#eadbe0` `#efe1e5` `#f2e5e9` `#f5e9ec`
20. [Navy and muted teal angular gradient](https://grabient.com/kUNRe6qJa-jqXPMai8Rg?style=angularGradient&steps=24&angle=0): angular gradient, `#101827` `#111a2a` `#121d2e` `#132034` `#14243a` `#152841` `#162c47` `#17314d` `#183653` `#1a3c59` `#1c4460` `#1f4d67` `#22556d` `#265b71` `#295f73` `#2b6073` `#2b5d70` `#295568` `#264a5e` `#223e52` `#1d3244` `#182638` `#131e2e` `#101827`
21. [Forest green and sage angular gradient](https://grabient.com/kUQBN_spG_tEPvqgCcFA?style=angularGradient&steps=64&angle=60): angular gradient, `#132622` `#142723` `#142824` `#152a25` `#152b26` `#162d28` `#162e29` `#17302b` `#17322c` `#18342e` `#193630` `#193831` `#1a3a33` `#1b3c35` `#1c3e37` `#1d4139` `#1f433b` `#20453e` `#224840` `#234b42` `#254d44` `#285047` `#2a5249` `#2d564c` `#31594f` `#355d53` `#3a6257` `#3e665b` `#436b5f` `#487063` `#4d7468` `#52796c` `#577d70` `#5c8274` `#618678` `#658a7b` `#698d7f` `#6c9081` `#6f9284` `#719485` `#739586` `#739586` `#739486` `#729284` `#709082` `#6d8c7f` `#69887b` `#648276` `#5f7d71` `#5a766b` `#547065` `#4e695f` `#486259` `#425b52` `#3b544c` `#354d46` `#304740` `#2a403a` `#253b35` `#203530` `#1c312c` `#192c28` `#162925` `#132622`
22. [Soft mauve slate interface](https://grabient.com/kSyQBAOBms12MuU?steps=32&angle=45): linear gradient, `#bbbbbb` `#b7b6b4` `#b3b0ac` `#aea8a2` `#a99f98` `#a5958e` `#9f8a85` `#997f7d` `#937478` `#8b6a75` `#826173` `#785973` `#6e5373` `#644f74` `#5b4d75` `#544c77` `#4f4d78` `#4b507b` `#49547e` `#4a5982` `#4c6086` `#4f678b` `#556f90` `#5b7796` `#63809b` `#6b88a1` `#7490a7` `#7c98ac` `#849fb1` `#8ba5b6` `#91aab9` `#95aebc`
23. [Dark coral slate background](https://grabient.com/kUVhJ0NRGqyoOtrFIM_g?style=radialGradient&steps=32&angle=0): radial gradient, `#2c3c34` `#2f3d32` `#343f30` `#3b402e` `#43412c` `#4d412c` `#554130` `#5c4136` `#60413f` `#624149` `#604250` `#5d4256` `#574159` `#50405a` `#483f59` `#403d56` `#393a52` `#33384e` `#2f364b` `#2c3549` `#2b3549` `#2d364b` `#323850` `#3b3a56` `#473d5c` `#564060` `#674461` `#77485f` `#854d59` `#905252` `#97584b` `#9b5d45`
24. [Powder blue cream background](https://grabient.com/kWeTF4YIzK0yWPtlFVRzBK0Q?steps=40&angle=45): linear gradient, `#316956` `#356e60` `#3d766d` `#487f7d` `#57888e` `#68929d` `#799bab` `#89a4b7` `#97abbf` `#a1b0c5` `#a6b2c8` `#a5b1c8` `#a0adc5` `#98a8c0` `#8da1ba` `#819ab4` `#7693ad` `#6c8da8` `#6688a4` `#6485a4` `#6a83a6` `#7784ab` `#8a85af` `#9f88af` `#b48dab` `#c595a4` `#d19e9d` `#d7a899` `#d8b097` `#d8b596` `#d6b495` `#d3b093` `#cfa991` `#caa090` `#c2968f` `#b88d90` `#ad8491` `#a27e91` `#977991` `#907590`

## Other forms

- [JSON](https://grabient.com/api/collections/app-background-gradients)
- [ASE](https://grabient.com/app-background-gradients.ase)
- [GPL](https://grabient.com/app-background-gradients.gpl)
- [GRD](https://grabient.com/app-background-gradients.grd)
- [Design tokens](https://grabient.com/app-background-gradients.tokens.json)
- [Image](https://grabient.com/api/png/collection?slug=app-background-gradients)
- [Social card](https://grabient.com/api/og/collection?slug=app-background-gradients&v=k4)
- [More collections](https://grabient.com/collections)
- [Guide for agents](https://grabient.com/llms.txt)