<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>
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;
}
High-quality vector backgrounds for modern web design ⭐
Immersive 3D backgrounds for modern web applications and landing pages.
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.