How to Create Glassmorphism Login Form in HTML and CSS ?
Glassmorphism, characterized by its transparent and frosted glass-like appearance, provides a visually appealing user interface. The login form will feature translucent backgrounds, blurred elements, and subtle shadows to achieve the Glassmorphism effect. the step-by-step process of designing and coding a stunning Glassmorphism login form that can be seamlessly integrated into web applications, enhancing both aesthetics and user experience.
Output Preview: Let us have a look at how the final output will look like
Approach to create Login Form with Glassmorphism effect
- Create a basic structure of the web page using HTML elements and Link external Stylesheet.
- Set up a background image or color to create the glass effect. Use `rgba()` to set the background color with transparency.
- Style the container div to center the login form vertically and horizontally on the page. Use CSS flexbox or grid to align form elements neatly.
- Apply a blur effect to the background to enhance the glassmorphism effect. Use CSS transitions for smooth hover effects.
- Create form elements such as input fields for username and password and a login button. Style the input fields with rounded corners, box shadows, and slight background color to give them a glassy appearance.
- Customize the login button with a gradient background, box-shadow, and rounded corners for a glassy effect. Add hover effects to the form elements for interactivity, such as changing the color or shadow on hover.
- Choose appropriate fonts for the login form, such as Google Fonts, to enhance the visual appeal.
Example: Illustration of Creating A Glassmorphism Login Form in HTML and CSS.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Glassmorphism Login Form</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "container" > < form class = "glass-login-form" > < h2 >Login</ h2 > < div class = "input-group" > < label for = "username" >Username</ label > < input type = "text" placeholder = "Email or Name" name = "username" required> </ div > < div class = "input-group" > < label for = "password" >Password</ label > < input type = "password" placeholder = "Password" id = "password" name = "password" required> </ div > < button type = "submit" >Login</ button > </ form > </ div > </ body > </ html > |
CSS
body { margin : 0 ; padding : 0 ; font-family : Arial , sans-serif ; display : flex; justify- content : center ; align-items: center ; min-height : 100 vh; background : linear-gradient( 45 deg, #ffffff , #e0e0e0 ); background-image : url ( "https://media.w3wiki.net/img-practice/prod/courses/543/Web/Content/GATE-DS-AI_1705410035.webp" ); background-repeat : no-repeat ; background- size : cover; } .container { width : 75% ; max-width : 400px ; } .glass-login-form { background : rgba( 255 , 255 , 255 , 0.25 ); border-radius: 15px ; backdrop-filter: blur( 5px ); padding : 20px ; } .glass-login-form h 2 { text-align : center ; color : #f4eeee ; } .input-group { margin : 20px ; } .input-group label { display : block ; margin-bottom : 5px ; color : #f1eaea ; } ::placeholder { color : #e5e5e5 ; } .input-group input { display : block ; width : 100% ; padding : 10px ; border : none ; border-radius: 8px ; background : rgba( 245 , 240 , 240 , 0.15 ); backdrop-filter: blur( 11px ); color : #f7efef ; } .input-group input:focus { outline : none ; background : rgba( 255 , 255 , 255 , 0.3 ); } button { margin : 10px ; width : 100% ; padding : 10px ; border : none ; border-radius: 8px ; background : linear-gradient( 45 deg, #8686e3 , #3b3494 ); color : #fff ; font-weight : bold ; cursor : pointer ; } button:hover { background : linear-gradient( 45 deg, #5d5e5d , #a4a4a7 ); } |
Output:
Contact Us