Gradient Search Input
Inputs · @Spacious74
- No JS
- Reduced-motion ready
Gradient Focus Input
A pure-CSS input with gradient, glow and blur effects. Created by Yaya12085 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.8 KB gzip
Created by @Yaya12085 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
<!-- "Gradient Focus Input" by Yaya12085 on Uiverse.io · MIT License · https://uiverse.io/Yaya12085/new-rabbit-37 -->
<div class="wrapper">
<span class="search">
<svg
fill="none"
color="#000000"
height="24"
width="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="1.5"
stroke="currentColor"
d="M17.5 17.5L22 22"
></path>
<path
stroke-linejoin="round"
stroke-width="1.5"
stroke="currentColor"
d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"
></path></svg
></span>
<input type="text" name="text" class="input" placeholder="Search..." />
<div class="coloredborder"></div>
<button class="filter">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
color="#000000"
fill="none"
>
<path
d="M8.85746 12.5061C6.36901 10.6456 4.59564 8.59915 3.62734 7.44867C3.3276 7.09253 3.22938 6.8319 3.17033 6.3728C2.96811 4.8008 2.86701 4.0148 3.32795 3.5074C3.7889 3 4.60404 3 6.23433 3H17.7657C19.396 3 20.2111 3 20.672 3.5074C21.133 4.0148 21.0319 4.8008 20.8297 6.37281C20.7706 6.83191 20.6724 7.09254 20.3726 7.44867C19.403 8.60062 17.6261 10.6507 15.1326 12.5135C14.907 12.6821 14.7583 12.9567 14.7307 13.2614C14.4837 15.992 14.2559 17.4876 14.1141 18.2442C13.8853 19.4657 12.1532 20.2006 11.226 20.8563C10.6741 21.2466 10.0043 20.782 9.93278 20.1778C9.79643 19.0261 9.53961 16.6864 9.25927 13.2614C9.23409 12.9539 9.08486 12.6761 8.85746 12.5061Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</button>
</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 .wrapper 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
Flashy Gradient Input
Inputs · @mRcOol7
- 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
3D Username Input
Inputs · @0xnihilism
- No JS
- Reduced-motion ready
Blue Pink Input
Inputs · @Cobp
- No JS
- Reduced-motion ready