Flashy Gradient Input
Inputs · @mRcOol7
- No JS
- Reduced-motion ready
3D Username Input
A pure-CSS input with gradient, glow and 3D effects. Created by 0xnihilism on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.3 KB gzip
Created by @0xnihilism on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3, --speed) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "3D Username Input" by 0xnihilism on Uiverse.io · MIT License · https://uiverse.io/0xnihilism/wise-lizard-57 -->
<div class="input__container">
<div class="shadow__input"></div>
<button class="input__button__shadow">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#000000"
width="20px"
height="20px"
>
<path d="M0 0h24v24H0z" fill="none"></path>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
></path>
</svg>
</button>
<input
type="text"
name="username"
class="input__search"
placeholder="Enter username"
/>
</div>
How to use it
- Paste the HTML where the animation should appear.
- Add the CSS to your stylesheet. PasteMotion has already scoped any global rules to the element.
- Adjust the custom properties (--accent, --color-2, --color-3, --speed) on .input__container to restyle it without touching the rest.
- Reduced-motion users are covered: the animation calms down or stops when that setting is on.
Related animations
Gradient Search Input
Inputs · @Spacious74
- No JS
- Reduced-motion ready
Gradient Focus Input
Inputs · @Yaya12085
- No JS
- Reduced-motion ready
Gradient Glowing Input
Inputs · @Mythsoul
- No JS
- Reduced-motion ready
Neon Search Input
Inputs · @LeonKohli
- No JS
- Reduced-motion ready
Blue Pink Input
Inputs · @Cobp
- No JS
- Reduced-motion ready