Graphite Glow
linearA subtle graphite gradient for premium dark UI.
Graphite Glow Without the Glow
Graphite Glow is the quietest gradient here, stepping through three dark grays with almost no chromatic color. It belongs in premium dark interfaces, dashboard headers, and modal backdrops where a hint of depth is wanted without a colored gradient stealing attention. The stops are only a few value steps apart, so the transition reads as soft light rather than a banner.
Use it for backgrounds behind white or near-white text, and keep the lightest gray at the top so simulated light falls naturally. Because the tonal range is so narrow, borders and divider lines still need solid tokens to define edges; a gradient alone will not separate cards. It also works as a base layer under a subtle glow effect on interactive elements like toggle switches and progress bars.
The narrow tonal range is the feature to protect: the three grays step from a deep slate to a medium gray, all in the same family, so the gradient never introduces a hue. Use it on modal headers or settings panel tops to suggest elevation without blinking. Keep the lightest stop at the top so the lit edge follows the way screens are read. White text holds on every stop, which makes the gradient safe behind a full-width header, and the fallback color should be the middle gray so the page still looks defined before the gradient loads.
position 0%
position 50%
position 100%
background: linear-gradient(135deg, #1F2937 0%, #374151 50%, #6B7280 100%);:root {
--gradient-graphite-glow: linear-gradient(135deg, #1F2937 0%, #374151 50%, #6B7280 100%);
}
.gradient-graphite-glow {
background-image: var(--gradient-graphite-glow);
}<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<linearGradient id="g" x1="14.64%" y1="14.64%" x2="85.36%" y2="85.36%">
<stop offset="0.000" stop-color="#1F2937" />
<stop offset="0.500" stop-color="#374151" />
<stop offset="1.000" stop-color="#6B7280" />
</linearGradient>
</defs>
<rect width="1200" height="600" fill="url(#g)" />
</svg>