Sunset Gradient
🟢 CSS OnlyA calming gradient transition mirroring a beautiful sunset, blending deep purples, fiery oranges, and golden yellows.
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-below-preview
Interactive Settings
Medium Rectangle Block
Slot ID: ca-pub-detail-after-customization
Quick Copy Actions
Download File Packages
Keyboard Shortcuts
Responsive Horizontal Leaderboard
Slot ID: ca-pub-detail-before-related
More in Gradient
Loading Canvas Shader...
Animated Mesh Gradient
A gorgeous, fluid mesh gradient featuring soft colorful spheres blending into each other with organic movement.
Loading Canvas Shader...
Aurora Flow
An elegant recreation of the northern lights, showing soft waves of emerald green and violet drifting on a dark sky.
Loading Canvas Shader...
Ocean Gradient
Soothing deep marine, aqua, and emerald tones morphing in an infinite wave-like gradient pattern.
Sunset Gradient - CSS-only Gradient background for React & Tailwind
Integrate the Sunset Gradient directly into your website. This asset is rendered using pure CSS and HTML keyframes. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.
⚡ Performance Specifications
- Render Mode: CSS-ONLY (CSS-only)
- Fluidity: Locked at 60fps dynamic loop
- Bundle Footprint: Zero external NPM dependencies
- SEO Indexing status: 100% Crawlable static semantic HTML
🛠️ Integration Capabilities
Our templates expose inline design tokens like --color-1 and --color-2 for infinite color palettes. This template is designed to fit inside hero elements, full-screen landing pages, and interactive presentation cards.
Technical Code Reference & Syntaxes for Googlebot & Crawlers
The snippets below display the direct, unminified source code utilized for rendering this background.
HTML & Inline CSS Snippet (Vanilla)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunset Gradient</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #09090b;
}
:root {
--speed: 12s;
}
.sunset-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e1b4b, #581c87, #b91c1c, #ea580c, #ca8a04);
background-size: 400% 400%;
animation: sunset-cycle var(--speed) infinite ease-in-out;
}
@keyframes sunset-cycle {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
</head>
<body>
<div class="sunset-gradient"></div>
</body>
</html>React Component Wrapper (TSX)
import React from 'react';
export default function SunsetGradientBackground() {
return (
<div
style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}
>
<style dangerouslySetInnerHTML={{ __html: `
:root {
--speed: 12s;
}
.sunset-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e1b4b, #581c87, #b91c1c, #ea580c, #ca8a04);
background-size: 400% 400%;
animation: sunset-cycle var(--speed) infinite ease-in-out;
}
@keyframes sunset-cycle {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
` }} />
{/* HTML Structure */}
<div
style={{ width: '100%', height: '100%' }}
dangerouslySetInnerHTML={{ __html: `
<div class="sunset-gradient"></div>
` }}
/>
</div>
);
}Next.js App Router Component (use client)
'use client';
import React from 'react';
export default function SunsetGradientBackground() {
return (
<div
className="w-full h-full relative overflow-hidden"
>
<style dangerouslySetInnerHTML={{ __html: `
:root {
--speed: 12s;
}
.sunset-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e1b4b, #581c87, #b91c1c, #ea580c, #ca8a04);
background-size: 400% 400%;
animation: sunset-cycle var(--speed) infinite ease-in-out;
}
@keyframes sunset-cycle {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
` }} />
{/* HTML Structure */}
<div
className="w-full h-full"
dangerouslySetInnerHTML={{ __html: `
<div class="sunset-gradient"></div>
` }}
/>
</div>
);
}Raw CSS Stylesheet Snippet
:root {
--speed: 12s;
}
.sunset-gradient {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1e1b4b, #581c87, #b91c1c, #ea580c, #ca8a04);
background-size: 400% 400%;
animation: sunset-cycle var(--speed) infinite ease-in-out;
}
@keyframes sunset-cycle {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}