Gradient 3D Notification
Tooltips · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Notification
A pure-CSS notification with pulse and SVG effects, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.4 KB gzip
Community animation · MIT License
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
<!-- © 2023 Uiverse.io · MIT License -->
<div class="notification">
<span class="star star1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>
<span class="star star2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>
<span class="star star3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ffa710" d="m22 9.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path><path fill="#fdd921" d="m22 8.8c0 .2-.104.4-.312.6l-4.363 4.2 1.033 6.1c.008 0 .012.1.012.2 0 .2-.044.3-.132.4-.08.1-.2.2-.361.2-.152 0-.312 0-.48-.1l-5.397-2.9-5.397 2.9c-.176.1-.336.1-.48.1-.169 0-.297-.1-.385-.2-.08-.1-.12-.2-.12-.4 0 0 .008-.1.024-.2l1.033-6.1-4.375-4.2c-.2-.2-.3-.4-.3-.6 0-.3.224-.5.673-.5l6.034-.9 2.704-5.5c.152-.3.349-.5.589-.5s.437.2.589.5l2.704 5.5 6.034.9c.449 0 .673.2.673.5"></path></svg></span>
<div class="ribbon">
<div class="ribbon-content">Level up!</div>
<div class="start"> press start</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 · Community
- No JS
- Reduced-motion ready
Glowing Spinning Notification
Tooltips · Community
- No JS
- Reduced-motion ready
Glowing Pulsing Notification
Tooltips · Community
- No JS
- Reduced-motion ready
Pulsing Fading Notification
Tooltips · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Pulsing Fading Notification 2
Tooltips · Community
- GPU-friendly
- No JS