Examples
Real, working snippets you can copy into the playground in seconds. Each one is small enough to read in a single sitting — and a great starting point for your own experiments.
- css · animation
Animated Gradient Button
A glossy button with a slow-shifting gradient and hover lift.
View code
HTML
<button class="glow">Click me</button>CSS
body { display: grid; place-items: center; min-height: 100vh; background: #0b0b12; } .glow { padding: 1rem 2rem; font-size: 1rem; color: white; border: 0; border-radius: 999px; background: linear-gradient(90deg, #6ee7b7, #3b82f6, #a855f7, #6ee7b7); background-size: 300% 100%; animation: shift 4s linear infinite; cursor: pointer; transition: transform .2s; } .glow:hover { transform: translateY(-2px); } @keyframes shift { to { background-position: 300% 0; } } - css · grid
Responsive Card Grid
A card grid that auto-fits to any screen with no media queries.
View code
HTML
<div class="grid"> <article><h3>One</h3><p>Lorem ipsum dolor sit amet.</p></article> <article><h3>Two</h3><p>Consectetur adipiscing elit.</p></article> <article><h3>Three</h3><p>Sed do eiusmod tempor incididunt.</p></article> <article><h3>Four</h3><p>Ut labore et dolore magna aliqua.</p></article> </div>CSS
body { background: #f5f5f7; font-family: system-ui; padding: 2rem; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } article { background: white; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); } - javascript · dom
Live Clock
A digital clock that ticks every second using vanilla JS.
View code
HTML
<div id="clock">--:--:--</div>CSS
body { display: grid; place-items: center; min-height: 100vh; background: #111; color: #6ee7b7; font-family: monospace; } #clock { font-size: 4rem; letter-spacing: .1em; }JS
function tick() { const now = new Date(); document.getElementById('clock').textContent = now.toTimeString().slice(0, 8); } tick(); setInterval(tick, 1000); - javascript · dom
Vanilla Todo List
Add, complete, and remove items — no framework required.
View code
HTML
<form id="f"><input id="i" placeholder="What needs doing?" autofocus /></form> <ul id="list"></ul>CSS
body { font-family: system-ui; max-width: 400px; margin: 2rem auto; } input { width: 100%; padding: .75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 8px; } ul { list-style: none; padding: 0; } li { padding: .5rem; border-bottom: 1px solid #eee; cursor: pointer; } li.done { text-decoration: line-through; opacity: .5; }JS
const form = document.getElementById('f'); const input = document.getElementById('i'); const list = document.getElementById('list'); form.addEventListener('submit', (e) => { e.preventDefault(); if (!input.value.trim()) return; const li = document.createElement('li'); li.textContent = input.value; list.append(li); input.value = ''; }); list.addEventListener('click', (e) => { if (e.target.tagName === 'LI') e.target.classList.toggle('done'); }); - javascript · css
Hover Card with Tilt
A card that tilts toward the cursor for a subtle 3D effect.
View code
HTML
<div class="card">Hover me</div>CSS
body { display: grid; place-items: center; min-height: 100vh; background: #1a1a2e; perspective: 800px; } .card { width: 220px; height: 300px; border-radius: 20px; background: linear-gradient(135deg, #3b82f6, #a855f7); color: white; display: grid; place-items: center; font-weight: 600; transition: transform .1s; }JS
const card = document.querySelector('.card'); card.addEventListener('mousemove', (e) => { const r = card.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; card.style.transform = `rotateY(${x * 20}deg) rotateX(${-y * 20}deg)`; }); card.addEventListener('mouseleave', () => { card.style.transform = ''; }); - html · javascript
Native <dialog> Modal
Modern modal built on the native HTML <dialog> element — no library.
View code
HTML
<button id="open">Open dialog</button> <dialog id="d"> <h2>Hello</h2> <p>This is a native modal.</p> <form method="dialog"><button>Close</button></form> </dialog>CSS
body { font-family: system-ui; padding: 2rem; } dialog { padding: 2rem; border: 0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); } dialog::backdrop { background: rgba(0,0,0,.4); }JS
document.getElementById('open').addEventListener('click', () => { document.getElementById('d').showModal(); }); - css · html
CSS-only Tabs
Tabs that work without any JavaScript using radio inputs.
View code
HTML
<div class="tabs"> <input type="radio" name="t" id="t1" checked /><label for="t1">One</label> <input type="radio" name="t" id="t2" /><label for="t2">Two</label> <input type="radio" name="t" id="t3" /><label for="t3">Three</label> <div class="panel p1">Panel one</div> <div class="panel p2">Panel two</div> <div class="panel p3">Panel three</div> </div>CSS
.tabs { font-family: system-ui; padding: 2rem; } .tabs input { display: none; } .tabs label { padding: .5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; } .tabs input:checked + label { border-color: #3b82f6; color: #3b82f6; } .panel { display: none; padding: 1rem 0; } #t1:checked ~ .p1, #t2:checked ~ .p2, #t3:checked ~ .p3 { display: block; } - css · animation
Loading Spinner
A clean CSS-only spinner using border tricks.
View code
HTML
<div class="spinner"></div>CSS
body { display: grid; place-items: center; min-height: 100vh; background: #0b0b12; } .spinner { width: 48px; height: 48px; border: 4px solid #1a1a2e; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }