<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gradients</title>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #1a1a1a;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
margin-bottom: 60px;
color: white;
}
.header h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
font-size: 20px;
color: rgba(255, 255, 255, 0.7);
}
.gradient-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.gradient-card {
background: #2a2a2a;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.gradient-display {
width: 100%;
height: 250px;
border-radius: 15px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.gradient-info {
color: white;
}
.gradient-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
}
.gradient-description {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 15px;
}
.gradient-code {
background: #1a1a1a;
padding: 12px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 12px;
color: #4fd1c5;
word-break: break-all;
}
.controls-section {
background: #2a2a2a;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.controls-title {
font-size: 28px;
font-weight: 700;
color: white;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.control-group {
margin-bottom: 25px;
}
.control-label {
display: block;
font-size: 16px;
font-weight: 600;
color: white;
margin-bottom: 10px;
}
.control-input {
width: 100%;
padding: 12px 16px;
background: #1a1a1a;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: white;
font-size: 16px;
}
.control-input:focus {
outline: none;
border-color: #667eea;
}
.color-pickers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.color-picker-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.color-input {
width: 100%;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
cursor: pointer;
}
.preset-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.preset-btn {
padding: 10px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.preset-btn:hover {
background: #764ba2;
transform: translateY(-2px);
}
.canvas-section {
background: #2a2a2a;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.canvas-container {
width: 100%;
height: 400px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
canvas {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.header h1 {
font-size: 36px;
}
.gradient-grid {
grid-template-columns: 1fr;
}
.color-pickers {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Animated Gradients in JavaScript</h1>
<p>Dynamic gradient animations with full control</p>
</div>
<!-- Preset Gradients -->
<div class="gradient-grid">
<div class="gradient-card">
<div class="gradient-display" id="gradient1"></div>
<div class="gradient-info">
<div class="gradient-title">Rotating Rainbow</div>
<div class="gradient-description">Continuous rotation with vibrant colors</div>
<div class="gradient-code" id="code1"></div>
</div>
</div>
<div class="gradient-card">
<div class="gradient-display" id="gradient2"></div>
<div class="gradient-info">
<div class="gradient-title">Pulsing Waves</div>
<div class="gradient-description">Animated position and opacity changes</div>
<div class="gradient-code" id="code2"></div>
</div>
</div>
<div class="gradient-card">
<div class="gradient-display" id="gradient3"></div>
<div class="gradient-info">
<div class="gradient-title">Color Morph</div>
<div class="gradient-description">Smooth color transitions</div>
<div class="gradient-code" id="code3"></div>
</div>
</div>
<div class="gradient-card">
<div class="gradient-display" id="gradient4"></div>
<div class="gradient-info">
<div class="gradient-title">Diagonal Sweep</div>
<div class="gradient-description">Moving diagonal gradient</div>
<div class="gradient-code" id="code4"></div>
</div>
</div>
<div class="gradient-card">
<div class="gradient-display" id="gradient5"></div>
<div class="gradient-info">
<div class="gradient-title">Radial Pulse</div>
<div class="gradient-description">Expanding radial gradient</div>
<div class="gradient-code" id="code5"></div>
</div>
</div>
<div class="gradient-card">
<div class="gradient-display" id="gradient6"></div>
<div class="gradient-info">
<div class="gradient-title">Hue Shift</div>
<div class="gradient-description">HSL color animation</div>
<div class="gradient-code" id="code6"></div>
</div>
</div>
</div>
<!-- Custom Controls -->
<div class="controls-section">
<h2 class="controls-title">
<ion-icon name="color-palette-outline"></ion-icon>
Custom Gradient Generator
</h2>
<div class="color-pickers">
<div class="color-picker-group">
<label class="control-label">Color 1</label>
<input type="color" class="color-input" id="color1" value="#667eea">
</div>
<div class="color-picker-group">
<label class="control-label">Color 2</label>
<input type="color" class="color-input" id="color2" value="#764ba2">
</div>
<div class="color-picker-group">
<label class="control-label">Color 3</label>
<input type="color" class="color-input" id="color3" value="#f093fb">
</div>
</div>
<div class="control-group">
<label class="control-label">Animation Speed: <span id="speedValue">2</span>s</label>
<input type="range" class="control-input" id="speedSlider" min="1" max="10" value="2" step="0.5">
</div>
<div class="control-group">
<label class="control-label">Angle: <span id="angleValue">45</span>°</label>
<input type="range" class="control-input" id="angleSlider" min="0" max="360" value="45">
</div>
<div class="preset-buttons">
<button class="preset-btn" onclick="applyPreset('sunset')">🌅 Sunset</button>
<button class="preset-btn" onclick="applyPreset('ocean')">🌊 Ocean</button>
<button class="preset-btn" onclick="applyPreset('forest')">🌲 Forest</button>
<button class="preset-btn" onclick="applyPreset('fire')">🔥 Fire</button>
<button class="preset-btn" onclick="applyPreset('purple')">💜 Purple Dream</button>
<button class="preset-btn" onclick="applyPreset('neon')">✨ Neon</button>
</div>
</div>
<!-- Canvas Gradient -->
<div class="canvas-section">
<h2 class="controls-title">
<ion-icon name="brush-outline"></ion-icon>
Canvas Gradient Animation
</h2>
<div class="canvas-container">
<canvas id="gradientCanvas"></canvas>
</div>
</div>
</div>
<script>
// Gradient 1: Rotating Rainbow
let angle1 = 0;
function animateGradient1() {
angle1 = (angle1 + 1) % 360;
const gradient1 = document.getElementById('gradient1');
gradient1.style.background = `linear-gradient(${angle1}deg, #667eea, #764ba2, #f093fb, #4facfe)`;
document.getElementById('code1').textContent = `linear-gradient(${angle1}deg, ...)`;
}
setInterval(animateGradient1, 50);
// Gradient 2: Pulsing Waves
let position2 = 0;
function animateGradient2() {
position2 = (position2 + 1) % 200;
const gradient2 = document.getElementById('gradient2');
gradient2.style.background = `linear-gradient(90deg,
#ff6b6b ${position2 - 50}%,
#4ecdc4 ${position2}%,
#45b7d1 ${position2 + 50}%)`;
document.getElementById('code2').textContent = `position: ${position2}%`;
}
setInterval(animateGradient2, 30);
// Gradient 3: Color Morph
let hue3 = 0;
function animateGradient3() {
hue3 = (hue3 + 1) % 360;
const gradient3 = document.getElementById('gradient3');
gradient3.style.background = `linear-gradient(135deg,
hsl(${hue3}, 70%, 60%),
hsl(${(hue3 + 120) % 360}, 70%, 60%))`;
document.getElementById('code3').textContent = `hue: ${hue3}°`;
}
setInterval(animateGradient3, 50);
// Gradient 4: Diagonal Sweep
let pos4 = -100;
function animateGradient4() {
pos4 = pos4 >= 200 ? -100 : pos4 + 2;
const gradient4 = document.getElementById('gradient4');
gradient4.style.background = `linear-gradient(45deg,
transparent ${pos4}%,
#f857a6 ${pos4 + 20}%,
#ff5858 ${pos4 + 40}%,
transparent ${pos4 + 60}%)`;
document.getElementById('code4').textContent = `position: ${pos4}%`;
}
setInterval(animateGradient4, 30);
// Gradient 5: Radial Pulse
let size5 = 0;
let growing5 = true;
function animateGradient5() {
if (growing5) {
size5 += 2;
if (size5 >= 100) growing5 = false;
} else {
size5 -= 2;
if (size5 <= 0) growing5 = true;
}
const gradient5 = document.getElementById('gradient5');
gradient5.style.background = `radial-gradient(circle at center,
#fa709a ${size5}%,
#fee140 ${size5 + 30}%)`;
document.getElementById('code5').textContent = `size: ${size5}%`;
}
setInterval(animateGradient5, 30);
// Gradient 6: Hue Shift
let hue6 = 0;
function animateGradient6() {
hue6 = (hue6 + 2) % 360;
const gradient6 = document.getElementById('gradient6');
gradient6.style.background = `linear-gradient(90deg,
hsl(${hue6}, 100%, 50%),
hsl(${(hue6 + 60) % 360}, 100%, 50%),
hsl(${(hue6 + 120) % 360}, 100%, 50%))`;
document.getElementById('code6').textContent = `hue: ${hue6}°`;
}
setInterval(animateGradient6, 50);
// Custom Gradient Controls
const color1 = document.getElementById('color1');
const color2 = document.getElementById('color2');
const color3 = document.getElementById('color3');
const speedSlider = document.getElementById('speedSlider');
const angleSlider = document.getElementById('angleSlider');
const speedValue = document.getElementById('speedValue');
const angleValue = document.getElementById('angleValue');
speedSlider.addEventListener('input', (e) => {
speedValue.textContent = e.target.value;
});
angleSlider.addEventListener('input', (e) => {
angleValue.textContent = e.target.value;
});
// Preset color schemes
function applyPreset(preset) {
const presets = {
sunset: ['#ff6b6b', '#f06595', '#cc5de8'],
ocean: ['#4facfe', '#00f2fe', '#43e97b'],
forest: ['#134e5e', '#71b280', '#b2f7ef'],
fire: ['#f12711', '#f5af19', '#ff512f'],
purple: ['#667eea', '#764ba2', '#f093fb'],
neon: ['#08fdd8', '#fe53bb', '#f5d300']
};
const colors = presets[preset];
color1.value = colors[0];
color2.value = colors[1];
color3.value = colors[2];
}
// Canvas Gradient Animation
const canvas = document.getElementById('gradientCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
let time = 0;
function animateCanvas() {
time += 0.01;
const gradient = ctx.createLinearGradient(
0,
0,
canvas.width,
canvas.height
);
const hue1 = (time * 50) % 360;
const hue2 = (time * 50 + 120) % 360;
const hue3 = (time * 50 + 240) % 360;
gradient.addColorStop(0, `hsl(${hue1}, 80%, 60%)`);
gradient.addColorStop(0.5, `hsl(${hue2}, 80%, 60%)`);
gradient.addColorStop(1, `hsl(${hue3}, 80%, 60%)`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add particles
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
for (let i = 0; i < 5; i++) {
const x = (Math.sin(time + i) * 0.5 + 0.5) * canvas.width;
const y = (Math.cos(time * 0.7 + i) * 0.5 + 0.5) * canvas.height;
const size = Math.sin(time + i) * 5 + 10;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(animateCanvas);
}
animateCanvas();
</script>
</body>
</html>
No comments yet. Be the first!