Skip to content
Luna UI
background color gradient

Presets

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: #FEC5BB 0%, #FCD5CE 14.29%, #FAE1DD 28.57%, #F8EDEB 42.86%, #E8E8E4 57.14%, #D8E2DC 71.43%, #ECE4DB 85.71%, #FFE5D9 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: #FEC5BB 0%, #FCD5CE 14.29%, #FAE1DD 28.57%, #F8EDEB 42.86%, #E8E8E4 57.14%, #D8E2DC 71.43%, #ECE4DB 85.71%, #FFE5D9 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.