Segmented Fill OTP — codepeek.dev

Inputs · community component

CSSMIT licenseUpdated today

◉ 0 views

Live

<!--
  Author: @theo-martin
  License: MIT
  Tags: #advanced #css
-->
<div class="sf-otp"><i style="--n:0" class="filled"></i><i style="--n:1" class="filled"></i><i style="--n:2" class="filled"></i><i style="--n:3"></i><i style="--n:4"></i><i style="--n:5"></i></div>

/*
 * Author: @theo-martin
 * License: MIT
 * Tags: #advanced #css
 */

.sf-otp{display:flex;gap:10px}.sf-otp i{position:relative;width:40px;height:52px;border-radius:10px;background:#1e293b;overflow:hidden;box-shadow:inset 0 0 0 1px #33415580}.sf-otp i.filled:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#38bdf8,#6366f1);animation:sf-rise .4s ease both;animation-delay:calc(var(--n) * .08s)}@keyframes sf-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryInputs

AccessibilityKeyboard ready

Explore similar parts →

Created by

Théo Martin

@theo-martin

LicenseMIT

Free for personal and commercial projects. Attribution appreciated, not required.

Théo Martin

Comments 0