Gradient Glowing Card
Cards · @MuhammadHasann
- GPU-friendly
- No JS
- Reduced-motion ready
Glow Rainbow Card
A pure-CSS card with gradient, spin and blur effects, animating only GPU-friendly properties. Created by SelfMadeSystem on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.1 KB gzip
Created by @SelfMadeSystem 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
<!-- "Glow Rainbow Card" by SelfMadeSystem on Uiverse.io · MIT License · https://uiverse.io/SelfMadeSystem/swift-bullfrog-34 -->
<div class="card">
<div class="bg uwu"></div>
<div class="bg"></div>
<div class="content">
<div class="img">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path></svg>
</div>
<div class="h1">
Johnathon<br>F. Stag
</div>
<div class="p">
Professional human
<p>
I do human things such as exist, eat foot, and work.
</p>
</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, --speed) on .card 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
Glow Code Card
Cards · @ShrinilDhorda
- No JS
- Reduced-motion ready
3D Gradient Card
Cards · @iconicchandu
- GPU-friendly
- No JS
- Reduced-motion ready
Glassmorphism Badge Card
Cards · @elijahgummer
- No JS
- Reduced-motion ready
Spinning Gradient Border Card
Cards · PasteMotion original
- Original
- No JS
- Reduced-motion ready
Flip Gradient Card
Cards · @ElSombrero2
- GPU-friendly
- No JS
- Reduced-motion ready