Tela de Login

Abrir en el editor Publica tu código

Recomendado

6 June 2025

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width", initial-scale="1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <title>Login</title>
</head>

<body>
    <div class="wrapper">
        <h2>Welcome</h2>
        <form action="#">
            <div class="input-field">
                <input type="email" id="email" placeholder="Email" required>
                <i class="bx bxs-user"></i>
            </div>
            <div class="input-field">
                <input type="password" id="password" placeholder="Password" required>
                <i class="bx bxs-lock-alt"></i>
            </div>
            <a href="#" class="forgot">
                <p>Forgot password?</p>
            </a>
            <button type="submit" class="login">Login</button>
            <p>Don't have an account? <a href="#" class="sing up">sign up</a></p>
        </form>
    </div>
</body>

</html>

CSS

body{
    background: url(https://static.vecteezy.com/system/resources/previews/007/218/724/original/beautiful-purple-particles-with-lens-flare-on-purple-gradient-color-background-luxury-background-design-element-free-photo.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 600px;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 350px;
    text-align: center;
    border: 1px solid rgb(241, 241, 241);
    border-radius: 12px;
    padding: 10px 20px;
    background: transparent;
    backdrop-filter: blur(6px);
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

.wrapper h2{
    font-size: 30px;
    color: #fffefe;
}

.input-field {
    position: relative;
}

.input-field input[type="email"],
.input-field input[type="password"] {
    border-radius: 10px;
    background: transparent;
    margin: 15px;
    border: 2px solid rgb(255, 255, 255);
    width: 280px;
    height: 2px;
    padding: 20px 40px 20px 20px;
    backdrop-filter: blur(15px);
}

.input-field i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: rgb(252, 252, 252);
}

input::placeholder {
    color: rgb(255, 255, 255);
}

.input-field input[type="email"]:focus::placeholder,
.input-field input[type="password"]:focus::placeholder {
    transform: translateY(-100%);
    transition: transform 0,2s ease-in-out;
    font-size: 14px;
}

.input-field input[type="email"]:not(:focus)::placeholder,
.input-field input[type="password"]:not(:focus)::placeholder {
    transform: translateY(0%);
    transition: transform 0.2s ease-in-out;
    font-size: 16px;
}

a.forgot {
    text-decoration: none;
    position: relative;
    color: rgb(255, 255, 255);
}

a.forgot:hover {
    text-decoration: underline;
    color: #fffffffd;
}

a.sign-up {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.712);
}

a.sign-up:hover {
    text-decoration: underline;
    color: #fffffffd;
}

.wrapper .login{
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: 600px;
    border-radius: 45px;
    width: 200px;
    height: 30px;
}

Tela de Login

Recomendado

Un código de alejandrokundrah

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS