# Dark mode UI gradients

Restrained dark ramps for interface shells, panels, navigation, and focused color accents.

- Page: https://grabient.com/dark-mode-ui-gradients
- Palettes: 13
- Tags: dark mode, ui, gradients, slate, blue, interface
- Collected by: Grabient
- Updated: 2026-10-01

## Palettes

1. [Black to dark gray](https://grabient.com/kSIgfFHwJACgDQA?steps=32&angle=180): linear gradient, `#07080c` `#08080d` `#09090e` `#0a0b0f` `#0b0c10` `#0d0e11` `#0e0f13` `#101115` `#121316` `#141518` `#16171a` `#18181c` `#1a1a1d` `#1c1c1f` `#1d1e21` `#1f1f22` `#202124` `#222225` `#232326` `#242528` `#262629` `#27272b` `#28292c` `#292a2d` `#2a2b2f` `#2b2c30` `#2d2d31` `#2d2e32` `#2e2f33` `#2f3034` `#303135` `#303136`
2. [Dark purple to gray](https://grabient.com/kUPDblqJnCLuTvfLljlA?steps=32): linear gradient, `#2e0f32` `#301033` `#321133` `#341334` `#371434` `#3a1635` `#3d1836` `#401a36` `#431c38` `#461f3a` `#49223c` `#4c253f` `#4f2942` `#522d46` `#56314a` `#59364e` `#5c3a53` `#5f3f58` `#63445d` `#664962` `#684d68` `#6b516d` `#6d5673` `#6f5b79` `#705f80` `#716487` `#71698d` `#716e93` `#717399` `#70779d` `#707ba1` `#707da3`
3. [Blue dark mode ui palette](https://grabient.com/kSQEnALcw_T-6Ps?steps=40&angle=135): linear gradient, `#111a51` `#111b54` `#111b57` `#111b5a` `#111b5e` `#111b62` `#101b67` `#101b6b` `#101a71` `#101a76` `#0f1a7b` `#0f1a81` `#0e1986` `#0e198b` `#0d1991` `#0c1a96` `#0b1b9a` `#091c9f` `#081da3` `#061fa6` `#0422a9` `#0125ab` `#002aab` `#0030a9` `#0035a9` `#0039a9` `#003daa` `#0041ab` `#0045ad` `#0048ae` `#004bb0` `#004eb2` `#0051b4` `#0054b6` `#0057b7` `#0059b9` `#015cba` `#055eba` `#0860bb` `#0b61bb`
4. [Near-black, deep teal and emerald color palette](https://grabient.com/kSMzp3rba-8YoPs?style=radialGradient&steps=40&angle=45): radial gradient, `#001c13` `#001d13` `#001e14` `#002015` `#002216` `#002418` `#002619` `#00281a` `#002a1c` `#002c1d` `#002f1f` `#003120` `#003422` `#003723` `#003a25` `#003c27` `#003f28` `#004229` `#00452b` `#00482c` `#004b2e` `#004e2f` `#005130` `#005432` `#005833` `#005b35` `#005f36` `#006337` `#006738` `#006a3a` `#006e3b` `#00723b` `#05753d` `#167840` `#207a43` `#287d46` `#2e7f48` `#33814b` `#38824d` `#3b844e`
5. [Near-black, bronze and ochre dark mode ui](https://grabient.com/kUJiEbJihBD-9wdSr0HA?style=angularGradient&steps=48&angle=210): angular gradient, `#1a0401` `#1c0400` `#1e0400` `#210500` `#240500` `#270600` `#2a0800` `#2d0900` `#310b00` `#340d00` `#380f00` `#3b1200` `#3f1400` `#431600` `#471900` `#4b1b00` `#4e1e00` `#522100` `#562400` `#5b2700` `#5f2a00` `#642d00` `#683100` `#6d3400` `#713800` `#763b00` `#7a3f00` `#7e4300` `#834600` `#874a00` `#8b4e00` `#8e5100` `#925400` `#955800` `#995c00` `#9c5f00` `#9f6300` `#a36600` `#a66a00` `#a96d00` `#ac7100` `#ae7400` `#b17700` `#b37a00` `#b57d00` `#b77f00` `#b8820d` `#b98415`
6. [Near-black and rose dark mode ui palette](https://grabient.com/kWJijwtbM_cxIwS1s0CExQ-4?style=radialGradient&steps=48&angle=330): radial gradient, `#190213` `#1d0317` `#22041c` `#290622` `#310829` `#3a0c31` `#43103a` `#4c1443` `#56194d` `#601d56` `#69215f` `#722567` `#7a286e` `#822b75` `#8b2e7b` `#943182` `#9d3488` `#a6368d` `#af3992` `#b73b96` `#be3d99` `#c43e9b` `#c93f9c` `#cb3f9c` `#cc3f9a` `#ca3e98` `#c73c93` `#c33a8e` `#bd3888` `#b63582` `#ae327b` `#a62f74` `#9d2c6d` `#942966` `#8c2660` `#83235a` `#7b2054` `#711d4e` `#671947` `#5c1540` `#511239` `#470e32` `#3c0a2b` `#330725` `#2b051f` `#230319` `#1e0215` `#190212`
7. [Mauve, dusty blue and crimson color palette](https://grabient.com/kajCOSNpBAaWMQWdB0RJgxKrOfwtCK0EA?steps=32&angle=225): linear gradient, `#4f7a7f` `#4b767b` `#456f74` `#3f676d` `#385f65` `#32585e` `#2c5057` `#27484f` `#214047` `#1d3940` `#1a323a` `#182d35` `#162830` `#16232b` `#161f28` `#161d26` `#191d26` `#1d1e28` `#24202b` `#2c222d` `#35252f` `#3d2830` `#472a32` `#512c34` `#5d2e37` `#683139` `#72343b` `#7d383c` `#883d3f` `#924242` `#9b4645` `#a24946`
8. [Color Palette: Forest green and deep teal](https://grabient.com/kWQx9xMZpALcYQ6vHMdo5pB4?steps=32&angle=45): linear gradient, `#102b1d` `#112e1f` `#123322` `#143825` `#163d29` `#18432d` `#194931` `#194e35` `#195139` `#19553e` `#195743` `#195947` `#1a5b4c` `#1a5c50` `#195c55` `#185c59` `#155c5c` `#105a60` `#0d5764` `#0d5467` `#114f69` `#174b6a` `#1d466a` `#214169` `#243d67` `#253963` `#24355f` `#23315a` `#212d56` `#202a51` `#1e274e` `#1e254c`
9. [Near-black and crimson color palette](https://grabient.com/kWEg8NI6S_7u6QMcGz5h4W_4?style=radialGradient&steps=40&angle=190): radial gradient, `#040001` `#060101` `#0b0101` `#120102` `#190204` `#220205` `#2c0308` `#35040c` `#3f050f` `#490712` `#510915` `#5b0c18` `#660f1b` `#71131e` `#7d1720` `#881b22` `#921f24` `#9a2225` `#9f2425` `#a12526` `#a02526` `#9a2326` `#912026` `#851d25` `#781923` `#691420` `#5b101d` `#4e0c19` `#420915` `#380711` `#2f050e` `#28040b` `#200308` `#190205` `#130104` `#0d0102` `#080102` `#050101` `#030001` `#020000`
10. [Near-black and deep teal color palette](https://grabient.com/kWFw-HKyS_70vPsemcJCga_4?style=radialGradient&steps=32&angle=0): radial gradient, `#000303` `#000606` `#000c0b` `#001413` `#001e1c` `#002826` `#003230` `#003b39` `#004340` `#004b47` `#00534e` `#005b54` `#006359` `#00695d` `#006d5f` `#006e60` `#006c5f` `#00665b` `#005c55` `#00514d` `#004644` `#003a3a` `#002f31` `#002729` `#002022` `#00191b` `#001315` `#000e0f` `#00090a` `#000506` `#000304` `#000203`
11. [Navy blush vertical fade](https://grabient.com/kWQxirHgbHCeMSA5DcGzwhFg?steps=6&angle=180): linear gradient, `#152733` `#1d1d27` `#30222a` `#4f3536` `#715852` `#8f8579`
12. [Midnight blue turquoise horizon](https://grabient.com/kaOgnSIJO9iw0Pm7zD_SE-_lC3PlXqDjg): linear gradient, `#1d1b22` `#1c203d` `#0b3182` `#004ccd` `#006ef0` `#1891df` `#2fb1a4`
13. [Muted analogous purple to navy](https://grabient.com/kWcCXMqw_AiAOvqhDj3LI8_I): linear gradient, `#514f6e` `#413d57` `#2f2b42` `#1f2035` `#1a2034` `#202b3e` `#2d3b50`

## Other forms

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