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: #F875AA 0%, #FDEDED 33.33%, #EDFFF0 66.67%, #AEDEFC 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: #F875AA 0%, #FDEDED 33.33%, #EDFFF0 66.67%, #AEDEFC 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
Tailwind v4. No additional markup requirements.
From
thuvien