Gradient Dark Tooltip
Tooltips · @Javierrocadev
- No JS
- Reduced-motion ready
Gradient Spinning Notification
A pure-CSS notification with gradient, spin and blur effects. Created by yaroslavas2001 on Uiverse.io.
- No JS
- Reduced-motion ready
- Customisable
- 1.7 KB gzip
Created by @yaroslavas2001 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 Spinning Notification" by yaroslavas2001 on Uiverse.io · MIT License · https://uiverse.io/yaroslavas2001/stupid-shrimp-89 -->
<div class="notification">
<div class="mirrow">
<svg class="fragment fragment1" viewBox="0 0 137 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H95L137 107.5L0 78V0Z"></path>
</svg>
<svg class="fragment fragment2" width="137" height="107" viewBox="0 0 137 107" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0L136.5 27.5L91 107H0V0Z"></path>
</svg>
<svg class="fragment fragment3" width="108" height="103" viewBox="0 0 108 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H108L96 52L37.5 103L0 0Z"></path>
</svg>
<svg class="fragment fragment4" width="140" height="110" viewBox="0 0 140 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69 0H140V99L0 110L60.5 52L69 0Z"></path>
</svg>
<svg class="fragment fragment5" width="184" height="86" viewBox="0 0 184 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 10L184 0V86H0L38 10Z"></path>
</svg>
<div class="level">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star1">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star2">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star3">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star4">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star5">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star6">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="star star7">
<path d="m12 17.328-5.403 3.286a.75.75 0 0 1-1.12-.813l1.456-6.155-4.796-4.123a.75.75 0 0 1 .428-1.316l6.303-.517 2.44-5.835a.75.75 0 0 1 1.384 0l2.44 5.835 6.303.517a.75.75 0 0 1 .427 1.316l-4.795 4.123 1.456 6.155a.75.75 0 0 1-1.12.813L12 17.328z"></path>
</svg>
<p class="level_text">Level Up!</p>
<p class="level_sub_text">7 lvl.</p>
<div class="btn_block">
<button class="btn">Menu</button>
<button class="btn">Next Level</button>
</div>
</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 .notification 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
Glowing 3D Notification
Tooltips · @Sameer2244
- No JS
- Reduced-motion ready
Gradient 3D Notification
Tooltips · @John-CFO
- GPU-friendly
- No JS
- Reduced-motion ready
Spinning Bouncing Notification
Tooltips · @devsleonardo
- GPU-friendly
- No JS
- Reduced-motion ready
Glowing Spinning Notification
Tooltips · @ahmed150up
- No JS
- Reduced-motion ready
Pulsing Notification
Tooltips · @andrew-demchenk0
- GPU-friendly
- No JS
- Reduced-motion ready