Login and signup forms are the gateway to most web applications — they shape the user's first impression. In this tutorial, you’ll learn how to build a modern animated login and signup page using pure HTML, CSS, and a touch of JavaScript. This design combines smooth transitions, gradient effects, and an interactive toggle that slides beautifully between two forms.
Quick Summary: Build a sleek two-in-one authentication interface. Use HTML to structure the forms, CSS for animation and gradient styling, and JavaScript to switch dynamically between login and signup panels.
A modern login page isn’t just a box with input fields — it’s a dynamic, interactive experience. This design features a two-panel layout: one for signing in, one for signing up. The toggle animation slides a gradient background from side to side, creating the illusion of flipping panels. Smooth transitions, clean typography, and responsive layout make it both elegant and functional.
Start by creating a <div> with the class container.
Inside, place two form containers — one for sign-in and another for sign-up.
Each form includes input fields for email, password, and (for signup) a name field.
A toggle-container holds the animated background and toggle buttons.
The magic lies in CSS transitions.
Using flexbox, elements are perfectly centered on the page.
The .toggle background uses a linear gradient moving from #38e8ff to #1d7896,
giving a cool blue glow effect.
Buttons have a hover animation that fills from bottom to top using background-size transitions.
The .container.active class triggers a transform effect that shifts panels horizontally,
revealing either the sign-in or sign-up form smoothly.
The JavaScript is minimal — just two event listeners.
Clicking the Sign Up button adds the active class to the container,
while clicking Sign In removes it.
These class changes trigger the CSS transitions, animating the sliding panels instantly.
The final product is a modern, responsive login/signup interface with smooth sliding transitions, gradient highlights, and interactive hover effects. It feels professional, fresh, and perfectly suitable for SaaS platforms, portfolios, or creative apps.
With just a few lines of CSS and JavaScript, you can transform a static login page into a modern interactive experience that impresses users from the very first click.