---
title: "Color Scheme: Site Gradient"
slug: "color-scheme-site-gradient"
updated: 2026-10-20T19:35:03Z
published: 2026-10-20T19:35:03Z
canonical: "docs.blackthorn.io/color-scheme-site-gradient"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blackthorn.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Scheme: Site Gradient

The Site Gradient replaces your flat page background with a three-stop gradient that flows behind all sections on the page. It is pre-filled from your Base 100 and Base 200 tokens and works best on dark themes where added depth across a long-scrolling page creates visual richness.

**Site Gradient**

Enable Gradient Background
**Toggle.** When on, the page background becomes a 3-stop gradient instead of a flat Base 100 fill. When off, all three color stops are saved but have no effect until re-enabled.

Start (Base 100 --b1)
First gradient stop. Defaults to **Base 100**: your primary page background. The gradient originates here (top-left for linear, center/corner for radial).

Middle (neutral-tinted surface)
Midpoint stop. Defaults to a neutral-tinted surface between Base 100 and Base 200. Light themes: subtle blend between surfaces. Dark themes: soft neutral shift. Move it closer to Start or End to reduce the mid-color pop.

End (Base 200 --b2)
Final stop. Defaults to **Base 200**. On dark themes this creates visible depth across the scroll; on light themes it's often nearly invisible unless you push it toward a contrasting color.

Style
Direction of the gradient: **Linear 90°** (left → right), **180°** (top → bottom), **135°** / **45°** (diagonal), **Radial center**, or **Radial corners**. For full-page scroll, Linear 180° (top → bottom) is the most natural.

---

![Site Settings → Color Scheme → Site Gradient: 3-stop background gradient with direction style picker](https://cdn.document360.io/f977eec0-500f-40a3-b663-724a51f78075/Images/Documentation/f4-04-site-gradient.png)Site Settings → Color Scheme → Site Gradient: 3-stop background gradient with direction style picker