Glow Code Card
Cards · @ShrinilDhorda
- No JS
- Reduced-motion ready
Gradient Glowing Card by Admin12121
A pure-CSS card with gradient, glow and pulse effects, animating only GPU-friendly properties. Created by Admin12121 on Uiverse.io.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 1.9 KB gzip
Created by @Admin12121 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 Glowing Card by Admin12121" by Admin12121 on Uiverse.io · MIT License · https://uiverse.io/Admin12121/brown-bird-6 -->
<div class="price-section">
<article class="price-table">
<div class="price"><small>$</small>249</div>
<span class="title">Solo Version</span>
<span class="description">A single license for solo designers, developers and freelancers.
</span>
<div class="features">
<details class="feature">
<summary>
<i aria-hidden="true" class="checkmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
</svg>
</i>
<span class="name">Free updates</span>
<i aria-hidden="true" class="question-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
</svg>
</i>
</summary>
<div class="answer">
You will gain access to every future update.
</div>
</details>
<details class="feature">
<summary>
<i aria-hidden="true" class="checkmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
</svg>
</i>
<span class="name">Use on unlimited projects</span>
<i aria-hidden="true" class="question-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
</svg>
</i>
</summary>
<div class="answer">
Create as many projects as you want.
</div>
</details>
<details class="feature">
<summary>
<i aria-hidden="true" class="checkmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
</svg>
</i>
<span class="name">Asset Hosting</span>
<i aria-hidden="true" class="question-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
</svg>
</i>
</summary>
<div class="answer">
Keep your files for easy access and management. 5GB space included. Scale when necessary.
</div>
</details>
<details class="feature">
<summary>
<i aria-hidden="true" class="checkmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
</svg>
</i>
<span class="name">Community support</span>
<i aria-hidden="true" class="question-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
</svg>
</i>
</summary>
<div class="answer">
Get help and learn new things in our community Slack with over 5,000 contributors.
</div>
</details>
<details class="feature">
<summary>
<i aria-hidden="true" class="checkmark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
</svg>
</i>
<span class="name">Version control</span>
<i aria-hidden="true" class="question-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z"></path>
</svg>
</i>
</summary>
<div class="answer">
Instant rollbacks to any version
</div>
</details>
</div>
</article>
</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 .price-section 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 Social Media Card
Cards · @vinodjangid07
- GPU-friendly
- No JS
- Reduced-motion ready
Gradient Glowing Card
Cards · @MuhammadHasann
- GPU-friendly
- No JS
- Reduced-motion ready
Star Moon Card
Cards · @Javierrocadev
- No JS
- Reduced-motion ready
Gradient Glowing Card by sohoning
Cards · @sohoning
- GPU-friendly
- No JS
- Reduced-motion ready
Spinning Gradient Border Card
Cards · PasteMotion original
- Original
- No JS
- Reduced-motion ready