Neumorphism Glassmorphism Card
Cards · Community
- GPU-friendly
- No JS
- Reduced-motion ready
Console Card
A pure-CSS animated card, animating only GPU-friendly properties.
- GPU-friendly
- No JS
- Reduced-motion ready
- Customisable
- 894 B 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 id="card" class="card">
<div class="content">
<div class="card-body">
<div class="code-container float-animation">
<span class="line"><span class="code-comment">// Código de ejemplo</span></span>
<span class="line"><span class="code-keyword">function</span> <span class="code-function">example</span>()</span>
<span class="line">{</span>
<span class="line indent"><span class="code-keyword">let</span> <span class="code-variable">message</span> = <span class="code-string">"Hello, World!"</span>;</span>
<span class="line indent"><span class="code-built-in">console</span>.<span class="code-method">log</span>(<span class="code-variable">message</span>);</span>
<span class="line">}</span>
</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 .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
Green Colorful Card
Cards · Community
- GPU-friendly
- No JS
- Reduced-motion ready
About Me Blur Filter Card
Cards · Community
- GPU-friendly
- No JS
- Reduced-motion ready
3D Shadow Card
Cards · Community
- No JS
- Reduced-motion ready
Shadow Box Card
Cards · Community
- No JS
- Reduced-motion ready
Spotify Pulsing Card
Cards · Community
- No JS
- Reduced-motion ready