• Quick Instructions:
  • Setup: Use a modern browser and a code editor (e.g., VS Code).
  • Project Structure: Create index.html and style.css in a folder.
  • Link CSS: in HTML .
  • Layout: Full-page background, centered glass login card with inputs and button.
  • Glass Effect: Use rgba for transparency + backdrop-filter: blur(15px) + shadows and rounded corners.
  • Colors: CodeKilla colors – #5fc149 (light green), #0f3d2e (dark green).
  • Optional: Hover animations, responsive design, floating labels.
  • HTML and CSS Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glass Login | Code Killa</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <div class="glass-card">
        <h2>Login</h2>

        <!-- FORM START -->
        <form onsubmit="handleSubmit(event)">
            <input type="text" placeholder="Email or Username" required>
            <input type="password" placeholder="Password" required>

            <button type="submit">Login</button>
        </form>
        <!-- FORM END -->

        <p>Don’t have an account? <a href="#">Sign up</a></p>
    </div>
</div>

<!-- SIMPLE JS FOR DEMO -->
<script>
    function handleSubmit(event) {
        event.preventDefault(); // stop page reload
        alert("✅ Login form submitted successfully!");
    }
</script>

</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

/* BODY BACKGROUND */
body {
    height: 100vh;
    background: linear-gradient(
        135deg,
        #0f3d2e,
        #5fc149
    );
}

/* CENTER CONTAINER */
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* GLASS CARD */
.glass-card {
    width: 360px;
    padding: 40px;
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 25px 45px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);

    color: #ffffff;
    text-align: center;
}

/* TITLE */
.glass-card h2 {
    margin-bottom: 28px;
    font-size: 28px;
    letter-spacing: 0.5px;
}

/* FORM */
.glass-card form {
    width: 100%;
}

/* INPUTS */
.glass-card input {
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    outline: none;

    background: rgba(15, 61, 46, 0.45);
    color: #ffffff;
    font-size: 15px;
}

.glass-card input::placeholder {
    color: #e8f6ec;
}

.glass-card input:focus {
    border-color: #5fc149;
    box-shadow: 0 0 0 2px rgba(95, 193, 73, 0.55);
    background: rgba(15, 61, 46, 0.6);
}

/* BUTTON */
.glass-card button {
    width: 100%;
    padding: 13px;
    margin-top: 5px;
    border: none;
    border-radius: 10px;

    background: #0f3d2e;
    color: #ffffff;

    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-card button:hover {
    background: #145c45;
    box-shadow: 0 12px 24px rgba(15, 61, 46, 0.6);
    transform: translateY(-2px);
}

/* TEXT */
.glass-card p {
    margin-top: 22px;
    font-size: 14px;
    color: #eaffea;
}

/* SIGNUP LINK */
.glass-card a {
    color: #0f3d2e;
    font-weight: bold;
    text-decoration: none;
}

.glass-card a:hover {
    color: #5fc149;
    text-decoration: underline;
}
  • Output