Flashy Gradient Input
Inputs · @mRcOol7
- No JS
- Reduced-motion ready
Glowing Input
A pure-CSS input with glow and SVG effects. Created by siraj-ha on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.6 KB gzip
Created by @siraj-ha 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
<!-- "Glowing Input" by siraj-ha on Uiverse.io · MIT License · https://uiverse.io/siraj-ha/serious-moose-70 -->
<div class="search-bar-container">
<form action="">
<div class="search-container">
<span class="search-icon">
<svg
height="24"
width="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
fill="currentColor"
></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
<input type="search" class="search-input" placeholder="Search..." />
<span class="filter-icon">
<span class="filter-icon">
<svg
height="24"
width="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#ffffff"
fill="#000000"
></path>
</svg>
</span>
</span>
</div>
</form>
</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 .search-bar-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
Neon Fillup Input
Inputs · @akshat-patel28
- 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