Modern Form UI (Best Looking) by Indoram24

0 Add to Favorites

HTML Code
CSS Code

*{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family: 'Poppins', sans-serif;
    }

body{
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        background: linear-gradient(135deg, #4f46e5, #06b6d4);
    }

.form-container{
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(12px);
        padding:30px;
        width:100%;
        max-width:380px;
        border-radius:16px;
        box-shadow:0 15px 30px rgba(0,0,0,0.2);
        color:#fff;
    }

.form-container h2{
        text-align:center;
        margin-bottom:25px;
        font-size:1.8rem;
    }

.input-group{
        margin-bottom:18px;
    }

.input-group label{
        font-size:0.9rem;
        display:block;
        margin-bottom:6px;
    }

.input-group input{
        width:100%;
        padding:12px 14px;
        border:none;
        outline:none;
        border-radius:10px;
        font-size:0.95rem;
    }

.input-group input:focus{
        box-shadow:0 0 0 2px #22d3ee;
    }

.btn{
        width:100%;
        padding:12px;
        border:none;
        border-radius:12px;
        background:#22d3ee;
        color:#000;
        font-size:1rem;
        font-weight:600;
        cursor:pointer;
        transition:0.3s;
    }

.btn:hover{
        background:#0ea5e9;
        color:#fff;
    }

.form-footer{
        text-align:center;
        margin-top:15px;
        font-size:0.85rem;
    }

.form-footer a{
        color:#e0f2fe;
        text-decoration:none;
        font-weight:500;
    }

Uploaded: 3rd January 2026

Tags: #form, #modern, #ui, #blue

Indoram24

•Member since: 3rd January 2026

CSS Properties Used

There are 26 CSS properties used in the above example. Click to view and learn about each property.

margin padding box-sizing font-family min-height display align-items justify-content background backdrop-filter width max-width border-radius box-shadow color text-align margin-bottom font-size border outline input font-weight cursor transition margin-top text-decoration

HTML Tags Used

There are 12 HTML Tags used in the above example. Click to view and learn about each tag.

html head meta title body div h2 form label input button a