🍀 Clover CSS — Component Showcase

🪟 Glass Card

7-layer glassmorphic card with backdrop blur, border pulse, noise texture.

Default

Glassmorphism

7 layers rendering simultaneously.

Hover to intensify reflection.

Custom

Faster + Stronger

3s pulse, 24px blur.

All via custom properties.

🔘 Clay Button

12 layered shadows. 3-stage hover. Elastic rebound. Gooey ripple.

Default

Large

Custom

<button class="clover-clay-button">Click Me</button>

🟨 Neubrutal Card

Hard shadow splits on hover. Diagonal slash. Broken border fragments.

Default

BRUTAL.

Hard shadows. Bold colors.

Hover to split shadow.

Custom

CUSTOM

Mint + indigo slash.

💻 Cyber Panel

CRT scanlines. 21-keyframe neon flicker. Glitch RGB-split. Terminal cursor.

Default

> INITIALIZING SYSTEM...

> CONNECTION ESTABLISHED

> READY.

Alternate

> RED/ORANGE THEME

> STRONGER GLITCH

🧲 Magnetic Container

3D perspective. Parallax pseudo-elements. Dynamic shadow.

Default

✨ Magnetic ✨

Hover over me!

🧲

Strong Tilt

600px perspective

🎯

🫧 Liquid Blob

SVG goo morphing. Caustic light. Pulsing ring.

Default

Custom

Fast

⌨️ Typewriter

CSS-only staggered typewriter. steps() timing. Ink bleed.

Hello from Clover CSS CDN! 🍀 This is a CSS-only typewriter effect. No JavaScript. Pure CSS magic.

<div class="clover-typewriter"><span data-typewriter-line style="--line-index:0;--line-chars:30;">...</span></div>

🌈 Kaleidoscope

Triple conic-gradient layers. Chromatic aberration.

Default

Fast

Small

🔄 Morphing Shape

7-stage clip-path morphing. Hover freezes animation.

Default

Fast

Custom

🌀 Rainbow Spinner

12-segment conic ring. Moiré pattern. Orbiting particles.

Default

Large

Fast

🌌 Parallax Section

4 depth-blur layers. Star dots. Nebula orbs. Vignette.

🚀 Deep Space

Scroll to see parallax layers shift.

<div class="clover-parallax-section"><div>Content</div></div>

🎴 Flip Card 3D

True 3D rotateY flip. Edge light. Ground reflection.

🎴 Front

Hover to flip!

🔮 Back

Surprise!

Teal Front

Custom!

Red Back

Custom!

<div class="clover-flip-card-3d"><div class="clover-flip-inner"><div class="clover-flip-front">...</div><div class="clover-flip-back">...</div></div></div>

🔍 Expand Search

Collapsed circle to expanded pill. Particle burst. Wave rings.

<div class="clover-expand-search"><input type="text" placeholder="Search..."></div>

🔔 Notification Bell

CSS-drawn bell. Swinging clapper. Badge bounce. Staggered tray.

With badge

With tray

<button class="clover-notification-bell has-notification"><span class="clover-bell-badge">3</span></button>

👻 Drag Ghost

5-layer ghost trail. Detached shadow. Particle burst.

Idle

Drag Me

Dragging

Moving!

🔦 Spotlight Card

Mouse-tracked radial reveal. Specular edge glow.

🔦 Spotlight

Move your cursor over me!

The light follows you.

🎚️ Toggle Realm

Sun/moon toggle. Orbiting particles. Atmosphere glow.

Off

On

<label class="clover-toggle-realm"><input type="checkbox"><span class="clover-toggle-track"></span><span class="clover-toggle-thumb"></span></label>

💬 Tooltip Magic

Glass tooltip. 4-direction support. Spring entrance.

<span class="clover-tooltip-magic">Hover<span class="clover-tooltip-body">Tip!</span></span>

📢 Marquee Banner

Infinite smooth scroll. Gradient fade edges. Pause on hover.

<div class="clover-marquee-banner"><div class="clover-marquee-track"><span>...</span></div></div>

📊 Progress Cosmic

Orbiting particles. Milestone bursts. Glow pulse.

70%

30%

<div class="clover-progress-cosmic" style="--clover-progress:70%;"><div class="clover-progress-fill"></div><div class="clover-progress-head"></div></div>