Presets
Customize
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%)));
}
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