Gradient Search Input
Inputs · @Spacious74
- No JS
- Reduced-motion ready
Neon Search Input
A pure-CSS input with gradient, glow and blur effects. Created by LeonKohli on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 2.0 KB gzip
Created by @LeonKohli on Uiverse.io · MIT License · View original →
What PasteMotion changed
- Customisable properties (--accent, --color-2, --color-3) lifted by PasteMotion; original values kept as fallbacks.
- Reduced-motion fallback added by PasteMotion.
Code
<!-- "Neon Search Input" by LeonKohli on Uiverse.io · MIT License · https://uiverse.io/LeonKohli/silly-dragonfly-82 -->
<div class="neon-search-container">
<div class="particle-container">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="glow-container">
<div class="glow-effect-left"></div>
<div class="glow-effect-right"></div>
<div class="search-bar">
<div class="search-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<input type="text" class="search-input" placeholder="Search..." />
<button class="filter-container">
<div class="filter-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
></path>
</svg>
</div>
</button>
</div>
</div>
</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) on .neon-search-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
Flashy Gradient Input
Inputs · @mRcOol7
- No JS
- Reduced-motion ready
Gradient Glowing Input
Inputs · @Mythsoul
- No JS
- Reduced-motion ready
Gradient Focus Input
Inputs · @Yaya12085
- No JS
- Reduced-motion ready
Blue Pink Input
Inputs · @Cobp
- No JS
- Reduced-motion ready
Neon Fillup Input
Inputs · @akshat-patel28
- No JS
- Reduced-motion ready