Skip to content
September 28, 2023
  • India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets.
  • Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download
  • Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami
  • Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान

Code with Nizami

I'm Web Developer

Newsletter
Random News
  • CSS Creatives
  • Entertainment
  • HTML
  • HTML&CSS
  • JavaScript
  • JavaScript
  • Others
  • PHP
  • Sports
  • Trending Post
  • Web Development Projects
  • Web Development Tutorials

Chief Editor

Saroj Mhr

Lorem ipsum is simply dummy text
  • Home
  • Web Development Projects
    • HTML&CSS
    • CSS Creatives
    • JavaScript
    • Others
  • Web Development Tutorials
    • HTML
    • CSS
    • JavaScript
  • Trending Post
    • Entertainment
    • Sports
    • Politics
    • Motivation
  • BLOGS
Youtube Live
  • Home
  • Web Development Projects
  • Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami

Highlight News

Sports
Trending Post
India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets.
Entertainment
Trending Post
Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download
HTML&CSS
Web Development Projects
Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami
Entertainment
Trending Post
Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान
  • HTML&CSS
  • Web Development Projects

Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami

CodewithNizami10 months ago10 months ago06 mins
Glasmorphism login form

Dear friends in this article we will tell you How to make Glasmorphism Login Form Using HTML, CSS 2022?. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to the search bar and type article name then you can find easily more interested articles.

Friends, in this article, we will tell you how to design the Glasmorphism login form, so let’s know. First of all, you have to download a code editor like Notepad++, Sublime and Visual Studio Code. We have designed this Glasmorphism login form in Visual Studio Code. You can also download and use this editor, it will be very helpful for you.

HTML

Now we have to open our code editor and create a new file by right clicking which will be of html then in that file you have to write the basic syntax of html. After that, in the body tag, take a div with a class and name that class as form for Glasmorphism login form, something like this.

<div class="card">
     <h3>Login Page</h3>
     <input type="text" placeholder="User"><br><br>
     <input type="password" placeholder="Password"><br><br>
     <button>LOG IN</button>
     <div class="social-icons">
        <div class="fb"><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></div>
        <div class="insta"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
        <div class="tw"><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
        <div class="yt"><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></div>
     </div>
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>

CSS

Friends, we have written the code of the css that we have used to design the Glasmorphism login form in this article, in the same html file, if you want, you can create a new style file for it and add the code to that file. Can be kept inside, then that file has to be linked in the html file.

CSS Code.

body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
        }
        .circle1{
            position: fixed;
            top: 5%;
            left: 30%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(to left, rgb(255, 0, 106),rgb(195, 0, 255));
            z-index: -1;
        }
        .circle2{
            position: fixed;
            bottom: 5%;
            right: 30%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(to left, rgb(255, 217, 0),rgb(255, 123, 0));
            z-index: -1;
        }
        .card{
            width: 300px;
            height: 400px;
            padding: 30px 20px;
            background-color: rgba(124, 124, 124, 0.205);
            backdrop-filter: blur(7px);
            border: 1px solid rgba(255, 255, 255, 0.377);
        }
        .card h3{
            text-align: center;
            margin-top: 10px;
            margin-bottom: 30px;
            font-family: sans-serif;
            color: #fff;
        }
        .card input{
            width: 100%;
            height: 30px;
            outline: none;
            padding-left: 5px;
        }
        .card button{
            width: 100%;
            height: 40px;
            outline: none;
            background-color: #fff;
            color: #000;
            margin-top: 20px;
            font-weight: bold;
            letter-spacing: 1px;
            transition: 0.4s;
            border: none;
            cursor: pointer;
        }
        .card button:hover{
            background-color: rgb(255, 0, 76);
            color: #FFF;
        }
        .card .social-icons{
            justify-content: center;
            align-items: center;
            display: flex;
            margin-top: 40px;
        }
        .social-icons .fb{
            width: 40px;
            height: 40px;
            background-color: rgb(0, 132, 255);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .fb a{
            text-decoration: none;
            color: #fff;
        }
        .social-icons .insta{
            width: 40px;
            height: 40px;
            background-color: rgb(255, 0, 76);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
        }
        .insta a{
            text-decoration: none;
            color: #fff;
        }
        .social-icons .tw{
            width: 40px;
            height: 40px;
            background-color: rgb(0, 225, 255);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
        }
        .tw a{
            text-decoration: none;
            color: #fff;
        }
        .social-icons .yt{
            width: 40px;
            height: 40px;
            background-color: rgb(255, 0, 0);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
        }
        .yt a{
            text-decoration: none;
            color: #fff;
        }

Watch Video Article Related

Tagged: css css 3d flip book css animation css buttons css cards css creative css creative tutorials css creatives css flip book css flip book tutorial css flip book with animation css full course css hover effects css tutorials Glassmorphism Login Form htmlcss

Post navigation

Previous: Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान
Next: Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Related News

upload images using php

How to upload images using php | Dynamic images uploading in php 2022.

CodewithNizami12 months ago12 months ago 0
web page print using javascript

Web Page Print Using Javascript | How to Print Web Page in Javascript?

CodewithNizami12 months ago12 months ago 0
product card using css

Product Card Using CSS | Card Design for e-commerce website | CodeWithNizami

CodewithNizami1 year ago1 year ago 0
Login System using PHP

Login System using PHP with Mysql 2022 | Authentication in PHP.

CodewithNizami1 year ago1 year ago 0

Recent Posts

  • India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets.
  • Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download
  • Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami
  • Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान
  • IND vs PAK: भारत के पाकिस्तान दौरे का फैसला गृह मंत्रालय करेगा, अनुराग ठाकुर बोले- खिलाड़ियों की सुरक्षा जरूरी है।
  • Neumorphism Calculator Using Jquery | Calculator Tutorial Step by Step 2022. 
  • How to upload images using php | Dynamic images uploading in php 2022.
  • Web Page Print Using Javascript | How to Print Web Page in Javascript?
  • Vikram Vedha Movie 2022: विक्रम वेधा फिल्म पर फैन का क्या रिएक्शन मिला और फैन कितने एक्सीटेंड थे देखने के लिए आइए जानते है।
  • T20 World Cup 2022 | रोहित शर्मा ने स्काई और कोहली की प्रशंसा की, हर्षल और भुवनेश्वर का समर्थन किया, लेकिन ‘डेथ बॉलिंग एक चिंता’ को स्वीकार किया, डीके बनाम पंत की बहस को सुलझाया

Categories

  • CSS Creatives
  • Entertainment
  • HTML
  • HTML&CSS
  • JavaScript
  • JavaScript
  • Others
  • PHP
  • Sports
  • Trending Post
  • Web Development Projects
  • Web Development Tutorials

Popular News

1

India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets.

  • Sports
  • Trending Post
2

Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download

  • Entertainment
  • Trending Post
3

Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami

  • HTML&CSS
  • Web Development Projects
4

Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान

  • Entertainment
  • Trending Post
5

IND vs PAK: भारत के पाकिस्तान दौरे का फैसला गृह मंत्रालय करेगा, अनुराग ठाकुर बोले- खिलाड़ियों की सुरक्षा जरूरी है।

  • Trending Post
6

Neumorphism Calculator Using Jquery | Calculator Tutorial Step by Step 2022. 

  • JavaScript
  • Web Development Tutorials
7

How to upload images using php | Dynamic images uploading in php 2022.

  • PHP
  • Web Development Projects
8

Web Page Print Using Javascript | How to Print Web Page in Javascript?

  • JavaScript
  • Web Development Projects

Trending News

Sports
Trending Post
India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets. 01
2 weeks ago2 weeks ago
02
Entertainment
Trending Post
Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download
03
HTML&CSS
Web Development Projects
Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami

Recent News

1

India vs Sri Lanka, Asia Cup 2023 Final: India win the match with 10 wickets.

  • Sports
  • Trending Post
2

Avatar 2 The Way Of Water (2022) Movie Download in filmyzilla 480p 720p 1080p Full HD 2022 | Hindi Movie Download

  • Entertainment
  • Trending Post
3

Glasmorphism Login Form Design Using CSS | UI Design | CodeWithNizami

  • HTML&CSS
  • Web Development Projects
4

Alauddin Khilji | भारत पर मंगोलों का हमला नाकाम करने वाला सुल्तान

  • Entertainment
  • Trending Post
5

IND vs PAK: भारत के पाकिस्तान दौरे का फैसला गृह मंत्रालय करेगा, अनुराग ठाकुर बोले- खिलाड़ियों की सुरक्षा जरूरी है।

  • Trending Post
6

Neumorphism Calculator Using Jquery | Calculator Tutorial Step by Step 2022. 

  • JavaScript
  • Web Development Tutorials
7

How to upload images using php | Dynamic images uploading in php 2022.

  • PHP
  • Web Development Projects
8

Web Page Print Using Javascript | How to Print Web Page in Javascript?

  • JavaScript
  • Web Development Projects
Copyright @ 2023 CodeWithNizami. Powered By BlazeThemes.
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Contact Us