Made by Flávio Áquila

Backseasy

Make the best background for your aplications

Frosted Glass EffectNewBackground with mirror effect
Frosted Glass Effect - Background Generator Tool
Nebula Spin EffectNewA dynamic spinning nebula effect!
Nebula Spin Effect - Background Generator Tool
Black Hole EffectNewCreate beautiful Black Hole
Black Hole Effect - Background Generator Tool
Support the project!NewBecome a supporter and get a special mention!
Support the project! - Background Generator Tool

Black hole customization:

Code:


    <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>
  

Effect Customizer:

Generated Code:


    <div style={{
      width: '400px',
      height: '400px',
      filter: 'blur(70px)',
      backgroundImage: 'linear-gradient(#6e20ff, #ef7be9)',
      animation: 'rotate 8s linear infinite',
      opacity: '1',
      borderRadius: '30% 70% 70% 30%/30% 30% 70% 70%',
    }} />
  

Controls

Ready to use:

<!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>

Control Points

Point: 1

Point: 2

Ready to use:

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%);

Free Background Generator & Customizer

Background Customizer

Off
Off

Preview

Generated Tailwind Code

background: linear-gradient(to right, #1c4b4f, #350813);

Frosted Glass Effect

Preview 1

Preview 2

Effect Customizer:

Gradient Background:

Generated CSS:


  .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;
  }
  

Object Backgrounds for Web Design

Atmospheric Background Effects

Animated CSS Backgrounds ⭐

Vector SVG Backgrounds

Dark Mode Backgrounds

Geometric Pattern Backgrounds

Sky & Nature Backgrounds

Artistic Butterfly Backgrounds

Light Mode & Minimalist Backgrounds

About Backseasy

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.

Backseasy Background Generator - About Section