Frosted Glass EffectNewBackground with mirror effect
Nebula Spin EffectNewA dynamic spinning nebula effect!
Black Hole EffectNewCreate beautiful Black Hole
Support the project!NewBecome a supporter and get a special mention!
<section
className="flex flex-col items-center h-screen"
style={{
backgroundImage: `radial-gradient(circle at bottom, #000000 40%, #3b3a3a 50%, #000 80%)`,
filter: `blur(10px)`
}}
>
{your component or page}
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle System</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
#particleCanvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="particleCanvas"></canvas>
<script>
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
let particles = [];
const particleCount = 100;
const particleSize = 3;
const particleColor = '#FF8C00';
const particleSpeed = 1;
const particleType = 'stars';
const initParticles = () => {
particles = [];
for (let i = 0; i < particleCount; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * particleSpeed * 2,
vy: (Math.random() - 0.5) * particleSpeed * 2,
size: Math.random() * particleSize + 1
});
}
};
const drawStar = (ctx, x, y, size) => {
const spikes = 5;
const outerRadius = size;
const innerRadius = size * 0.4;
let rot = Math.PI / 2 * 3;
const step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(x, y - outerRadius);
for (let i = 0; i < spikes; i++) {
ctx.lineTo(x + Math.cos(rot) * outerRadius, y + Math.sin(rot) * outerRadius);
rot += step;
ctx.lineTo(x + Math.cos(rot) * innerRadius, y + Math.sin(rot) * innerRadius);
rot += step;
}
ctx.closePath();
ctx.fill();
};
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
particle.x = Math.max(0, Math.min(canvas.width, particle.x));
particle.y = Math.max(0, Math.min(canvas.height, particle.y));
ctx.fillStyle = particleColor;
ctx.shadowColor = particleColor;
ctx.shadowBlur = 10;
if (particleType === 'stars') {
drawStar(ctx, particle.x, particle.y, particle.size);
} else if (particleType === 'fire') {
ctx.globalAlpha = 0.8;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
ctx.globalAlpha = 1;
} else if (particleType === 'bubbles') {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.strokeStyle = particleColor;
ctx.lineWidth = 2;
ctx.stroke();
} else {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
}
});
requestAnimationFrame(animate);
};
const resizeCanvas = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initParticles();
};
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
animate();
</script>
</body>
</html>background:
radial-gradient(circle at 100% 100%, #000000 25%, transparent 70%),
radial-gradient(circle at 0% 0%, #1e002e 5%, transparent 70%),
linear-gradient(135deg, #0a0a0f 0%, #1a0a2e 100%);
background: linear-gradient(to right, #1c4b4f, #350813);
Preview 1
Preview 2
.frosted-glass {
backdrop-filter: blur(6px) saturate(109%);
-webkit-backdrop-filter: blur(6px) saturate(109%);
background-color: #ffffffCC; // color with opacity -> (CC = 80%)
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-size: cover;
background-repeat: no-repeat;
}
Backseasy is the ultimate free background generator for web designers and developers. Our comprehensive collection features animated CSS backgrounds, gradient generators,glassmorphism effects, and modern UI patterns that are perfect forNext.js projects, React applications, and Tailwind CSS designs.
Whether you need dark mode backgrounds, responsive patterns,SVG backgrounds, or 3D web backgrounds, our library provides high-quality, customizable options that enhance your frontend development workflow. All backgrounds are optimized for performance and ready to download instantly.
