Skip to content
Luna UI
background color gradient

Presets

Sunset
Ocean
Aurora

Customize

From Colors

2–8 hex colors, separated by commas. Add @0 to @100 for positions; 8 digits include alpha.

Gradient type

Preview

Copy the code

<div class="tv-gradient-background" role="img" aria-label="Custom gradient background" style="--tv-gradient-background-stops: #780000 0%, #C1121F 25%, #669BBC 50%, #FDF0D5 75%, #003049 100%; --tv-gradient-background-angle: 135deg; --tv-gradient-background-type: linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%));"></div>

<style>
.tv-gradient-background {
  box-sizing: border-box;
  min-height: 16rem;
  width: 100%;
  border-radius: 0.75rem;
  background-image: var(--tv-gradient-background-type, linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%)));
}
</style>
.my-gradient-background {
  --tv-gradient-background-stops: #780000 0%, #C1121F 25%, #669BBC 50%, #FDF0D5 75%, #003049 100%;
  --tv-gradient-background-angle: 135deg;
  --tv-gradient-background-type: linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%));
}

.tv-gradient-background {
  box-sizing: border-box;
  min-height: 16rem;
  width: 100%;
  border-radius: 0.75rem;
  background-image: var(--tv-gradient-background-type, linear-gradient(var(--tv-gradient-background-angle, 135deg), var(--tv-gradient-background-stops, #FB7185 0%, #FBBF24 100%)));
}
Markdown for AI agents
Usage & credits
Use when
Hero backgrounds, cards, banners, and decorative surfaces.
Avoid when
Behind long passages without checking text contrast.
Requires
Nothing extra. Plain HTML and CSS, no framework needed.
From
thuvien