Formulario de inicio de sesión de Glassmorphism

4,233 Andev.web

Abrir en el editor Publica tu código

Formulario de inicio de sesión de Glassmorphism

Recomendado

20 December 2025

Visualización de redes neuronales 3D (Three.js)

3 January 2025

Un código de Landingpage1

11 July 2025

Menú de alternancia CSS con iconos de Font Awesome

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.postimg.cc/0jv27Qvw/20008380-645221846.jpg"), #000;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.wrapper {
  width: 400px;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  transition: all 0.3s ease;
}

.wrapper:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 25px;
  color: #ffffff;
  letter-spacing: 1px;
}

.input-field {
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  margin: 20px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.3s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #ffffff;
  padding: 0 10px;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.9rem;
  top: 10px;
  transform: translateY(-150%);
  color: #ffdde1;
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #ffffff;
}

#remember {
  accent-color: #ffdde1;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
}

.wrapper a {
  color: #ffdde1;
  text-decoration: none;
}

.wrapper a:hover {
  text-decoration: underline;
}

button {
  background-color: #271930;
 color: #ffffff;
  font-weight: 600;
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 25px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

button:hover {
  color: #000000;
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #ffffff;
}