Inputs · community component

Glassmorphic Floating Input

Campo de texto con acabado en cristal translúcido y elevación suave.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="input-492"><input type="password" placeholder="Enter Security Key"></div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="input-492"><input type="password" placeholder="Enter Security Key"></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.input-492 { width: 240px; font-family: system-ui, sans-serif; }
.input-492 input { width: 100%; padding: 12px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 12px; color: #fff; font-size: 13px; outline: none; transition: all 0.3s ease; box-sizing: border-box; }
.input-492 input::placeholder { color: #6b7280; }
.input-492 input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.input-492 { width: 240px; font-family: system-ui, sans-serif; }
.input-492 input { width: 100%; padding: 12px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 12px; color: #fff; font-size: 13px; outline: none; transition: all 0.3s ease; box-sizing: border-box; }
.input-492 input::placeholder { color: #6b7280; }
.input-492 input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryInputs

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.