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: #D9A0C7 0%, #055981 100%; --tv-gradient-background-angle: 297deg; --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: #D9A0C7 0%, #055981 100%;
  --tv-gradient-background-angle: 297deg;
  --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