What You'll Build

In this tutorial, you'll build a glassmorphism login form with an animated Particles.js background entirely from scratch. The result is a modern, visually striking login page that combines a frosted-glass card effect, layered background images, CSS keyframe animations, and a live particle system.

This project is perfect for practicing CSS backdrop-filter, Flexbox centering, @keyframes animations, and third-party library integration — all in one cohesive real-world UI component.

Key Features of This Login Page

🪟
Glassmorphism Effect
Semi-transparent card with backdrop-filter: blur() for a real frosted-glass look.
✨
Particles.js Background
Animated particle network renders behind the login card for a dynamic, immersive feel.
🍂
CSS Falling Animation
Pure CSS @keyframes animate leaves or particles falling across the viewport.
📐
Flexbox Centering
The login card is perfectly centered on all screen sizes using CSS Flexbox.
🖼️
Layered Backgrounds
Multiple background images stacked with z-index create depth and a rich scene.
📱
Fully Responsive
Works cleanly from 320px mobile to large desktop displays.
HTML — index.html
CSS — style.css

How It Works — Step by Step

Here's a breakdown of each technique used to build this glassmorphism login form, from the HTML structure to the Particles.js configuration.

01

HTML Structure

A full-viewport wrapper <section> holds two children: a <div id="particles-js"> that Particles.js renders into, and the login card <div class="login-box"> with form inputs. Both are position: absolute inside the wrapper.

02

CSS Glassmorphism Effect

The login card uses background: rgba(255,255,255,0.1) for translucency, backdrop-filter: blur(12px) for the frosted-glass blur, and border: 1px solid rgba(255,255,255,0.2) for the glass edge. A box-shadow adds depth.

03

Flexbox Centering

The full-page container uses display: flex; align-items: center; justify-content: center; to keep the login card centered on every screen size without any absolute positioning on the card itself — a clean and maintainable centering technique.

04

Input Fields & Button Styling

Inputs use background: rgba(255,255,255,0.08) and a subtle border-bottom for a minimal glass-style look. The submit button includes a :hover background and transition for clear visual feedback on interaction.

05

CSS Keyframe Falling Animation

Leaf or particle elements use @keyframes to animate translateY, rotate, and opacity from top to bottom. Multiple instances use different animation-delay and animation-duration values for a natural, staggered fall.

06

Particles.js Initialization

Particles.js is loaded from CDN and initialized with particlesJS('particles-js', {...}). The config object sets particle count, color, size, speed, and link distance. Set color: "#00d9ff" to match the site's cyan palette for visual consistency.

⚠️ Browser Support: backdrop-filter: blur() requires the -webkit- prefix for older Safari versions. Always add both: -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); and provide a fallback opaque background for unsupported browsers.

Project Background Images — Free Download

The login page uses six layered background images to create the depth effect. Download each one from Google Photos and place them in the same folder as your HTML file.

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6
📁 File structure: Place all images in the same directory as index.html and reference them by filename in your CSS background-image properties.

Frequently Asked Questions

What is a glassmorphism login form?
A glassmorphism login form uses backdrop-filter: blur() and a semi-transparent background to create a frosted-glass appearance. Placed over a vivid animated background, the form appears to float in front of the scene — a popular UI trend in modern web design.
How do I create a glassmorphism effect with CSS?
Apply these CSS properties: background: rgba(255,255,255,0.1) for translucency; backdrop-filter: blur(12px) for the blur; border: 1px solid rgba(255,255,255,0.2) for the glass edge; and border-radius for rounded corners. The element must sit over a colorful or animated background for the effect to be visible.
What is Particles.js and how do I add it?
Particles.js is a lightweight JavaScript library that renders animated particle networks on a canvas element. Add it to your project via CDN: <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>, then call particlesJS('particles-js', { ...config }) with your desired settings.
Does backdrop-filter work in all browsers?
It works in Chrome, Edge, Safari, and Firefox 103+. Always add the -webkit-backdrop-filter prefix alongside the standard property, and provide a fallback background: rgba(0,0,0,0.5) for older browsers that don't support it.
Is this login form responsive on mobile?
Yes. The layout uses CSS Flexbox to center the card on all screen sizes, and the card itself uses relative units and max-width to scale cleanly from 320px mobile to large desktop monitors.
How do I change the particle color to match my brand?
In your particlesJS() config, find the particles.color.value property and change it to any hex color — for example "#00d9ff" for cyan or "#a855f7" for purple. The link color between particles can be set separately under line_linked.color.

Conclusion

This glassmorphism login form is a great example of how modern CSS and a lightweight library can combine to create a production-quality UI component. By using backdrop-filter, CSS keyframe animations, layered backgrounds, and Particles.js, you get a visually impressive login page that loads fast and works on all devices.

Download the source code, grab the six free background images above, and start customizing the design to fit your project. Change the glow color, particle density, or animation timing to make it your own.

Found this useful? Explore more modern UI effects in the sidebar projects.