Gradient Frames

Gradient Frames

Add color to your Obsidian window with hand-picked gradients!

42 linear gradients are from WebGradients.

You can choose the linear gradient direction: top or bottom.

Note: You can use the Obsidian Style Settings plugin to easily switch between gradients and their direction.

List of gradients

The top two frames show the top direction in gradients in dark and light themes, and the ones at the bottom display the when the direction is set to bottom.

Warm Flame

Night Fade

Spring Warmth

Young Passion

Sunny Morning

Rainy Ashville

Winter Neva

Tempting Azure

Heavy Rain

Malibu Beach

True Sunset

Morpheus Den

Wild Apple

Plum Plate

Happy Fisher

Blessing

Snow Again

February Ink

Soft Grass

Teen Notebook

Purple Division

Aqua Splash

Love Kiss

Premium Dark

Cold Evening

Summer Games

Midnight Bloom

Crystalline

Le Cocktail

Frozen Berry

New Retrowave

Dense Water

Seashore

Cheerful Caramel

Night Sky

Colorful Peach

Plum Bath

Glass Water

North Miracle

Smart Indigo

Aqua Guidance

Night Call

Extending gradients

You can add more gradients of your choosing with top and bottom variations, such as:

:root {
  ...
  --rainy-ashville-top: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  --rainy-ashville-bottom: linear-gradient(to bottom, #fbc2eb 0%, #a6c1ee 100%);
}

You can then create the styles:

body.top.rainy-ashville .workspace-tab-header-container,
body.top.rainy-ashville .workspace-ribbon.mod-left:before,
body.top.rainy-ashville .sidebar-toggle-button.mod-right {
  background-image: var(--rainy-ashville-top);
  color: var(--color-dark); /* or var(--color-light) */
  ...
}

body.bottom.rainy-ashville .workspace-tab-header-container,
body.bottom.rainy-ashville .workspace-ribbon.mod-left:before,
body.bottom.rainy-ashville .sidebar-toggle-button.mod-right {
  background-image: var(--rainy-ashville-bottom);
  color: var(--color-dark); /* or var(--color-light) */
  ...
}

And add them in gradient-frames.css in .obsidian/snippets folder inside your Obsidian vault.