Input Brillante Neón – webgenio.com

VISTA PREVIA CSS

Regístrate para guardar

body {
  background-color: #1a1a1a; /* Fondo oscuro para que el brillo resalte */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
  overflow: hidden; /* Previene scroll si el body no se ajusta */
}

.fancy-neon-input-container {
  position: relative;
  width: 300px; /* Ancho fijo para el contenedor del input */
  max-width: 90%; /* Responsividad básica */
}

.fancy-neon-input {
  width: 100%;
  padding: 15px 20px;
  background-color: #2c2c2c; /* Fondo del input un poco más claro que el body */
  color: #e0e0e0; /* Color de texto claro */
  border: none;
  border-radius: 10px;
  font-size: 1.2em;
  outline: none;
  transition: all 0.4s ease; /* Transición suave para todos los cambios */
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.7); /* Sombra inicial sutil, casi invisible */
  -webkit-appearance: none; /* Resetear estilos en Webkit */
  -moz-appearance: none; /* Resetear estilos en Mozilla */
  appearance: none;
}

.fancy-neon-input::placeholder {
  color: #888; /* Color del placeholder */
  transition: color 0.3s ease;
}

.fancy-neon-input:focus {
  background-color: #383838; /* Fondo ligeramente más claro al enfocar */
  color: #ffffff; /* Texto blanco puro al enfocar */
  box-shadow: 
    0 0 10px rgba(230, 71, 255, 0.7), /* Primer nivel de brillo (Púrpura Neón) */
    0 0 20px rgba(71, 255, 255, 0.6), /* Segundo nivel de brillo (Cian Neón) */
    0 0 40px rgba(230, 71, 255, 0.5), /* Tercer nivel de brillo (Púrpura Neón) */
    0 0 80px rgba(71, 255, 255, 0.4); /* Cuarto nivel de brillo (Cian Neón) */
  transform: scale(1.02); /* Efecto de zoom sutil al enfocar */
}

.fancy-neon-input:focus::placeholder {
  color: #b0b0b0; /* Placeholder un poco más claro al enfocar */
}