🍀 Clover CSS Documentation

An intentionally overcomplicated CSS library. 15 components. One class each. 5,200+ lines of CSS. Zero JavaScript required. Beautiful, absurd results.

📦 Installation

CDN (Recommended)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/spideythedev/clover-css/clover.min.css">

NPM

npm install clover-css

@import 'clover-css/clover.css';

Direct Download

Download clover.css or clover.min.css from the GitHub Releases page and include it in your project.

File Structure

clover-css/
├── clover.css          # Full source (5,200+ lines)
├── README.md           # Overview + quick start
├── docs.html           # You are here
├── license.html        # MIT License
└── index.html      # 15-component showcase

🚀 Quick Start

Add the CSS file to your project, then use one class per component:

<link rel="stylesheet" href="clover.css">

<!-- Glass card with 7 visual layers -->
<div class="clover-glass-card">
  <h2>Hello Clover</h2>
  <p>This card has 7 simultaneous layers.</p>
</div>

<!-- Clay button with 12 shadows -->
<button class="clover-clay-button">Click Me</button>

<!-- Cyberpunk terminal panel -->
<div class="clover-cyber-panel">
  <p>> ACCESSING MAINFRAME...</p>
</div>

That's it. One class. No JavaScript. Maximum chaos.

🧠 Philosophy

Modern CSS is too easy. Utility classes? Sanity? Maintainability? Where's the art?

Clover CSS is the antidote. Every component is a masterclass in CSS excess:

• 150-300 lines per component — Each class hides incredible complexity
• Nested pseudo-elements — ::before and ::after are always in use, often with multiple visual layers each
• Math-driven animations — calc(), steps(), cubic-bezier() spring physics
• SVG filters — feTurbulence, feDisplacementMap for real-time distortion
• Blend modes — overlay, multiply, screen for complex color interactions
• Transform chains — perspective + rotateY + scale + skew combos

🧩 Components

All 15 components with usage, custom properties, and examples.

1. .clover-glass-card

A 7-layer glassmorphic card with backdrop blur chain, animated conic-gradient border pulse, SVG fractal noise texture, gradient reflection sweep, and inner glow.

<div class="clover-glass-card">
  <h3>Glass Card</h3>
  <p>Content here...</p>
</div>

Custom Properties

2. .clover-clay-button

12 layered box-shadows. 3-stage hover sequence. Active squish to 0.92× with elastic spring rebound. Breathing gooey ripple pseudo-element.

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

Custom Properties

3. .clover-neubrutal-card

Hard 8px offset shadow that splits on hover. Diagonal color slash with multiply blend mode. Broken corner border fragments. SVG noise grain.

<div class="clover-neubrutal-card">
  <h3>BRUTAL.</h3>
  <p>Content here...</p>
</div>

Custom Properties

4. .clover-cyber-panel

CRT scanlines. 21-keyframe neon flicker. Glitch RGB-split via clip-path jumps. Terminal cursor blink. Dual-color border oscillation.

<div class="clover-cyber-panel">
  <p>&gt; ACCESSING MAINFRAME...</p>
</div>

Custom Properties

5. .clover-magnetic-container

3D perspective container. Two parallax pseudo-elements at Z-depths -40px and -20px. Dynamic shadow rotation. Optional JS cursor tracking.

<div class="clover-magnetic-container" style="background: linear-gradient(135deg, #667eea, #764ba2);">
  <h3>Hover Me</h3>
</div>

6. .clover-liquid-blob

SVG feTurbulence + feDisplacementMap goo morphing. 5-keyframe border-radius animation. Caustic light refraction. Pulsing outline ring.

<div class="clover-liquid-blob"></div>

Requires SVG filter in HTML: See the demo page for the filter definition.

7. .clover-typewriter

CSS-only staggered typewriter using steps(). Per-line delay via --line-index. Ink bleed text-shadow. Paper texture. Ink splatters.

<div class="clover-typewriter">
  <span data-typewriter-line style="--line-index:0;--clover-typewriter-chars-per-line:35;">Line one text here</span>
  <span data-typewriter-line style="--line-index:1;--clover-typewriter-chars-per-line:42;">Line two with more characters</span>
</div>

8. .clover-kaleidoscope

Three conic-gradient layers at different speeds. Octagon + 10-point star clip-paths. Chromatic aberration via RGB-offset box-shadows.

<div class="clover-kaleidoscope"></div>

9. .clover-morphing-shape

7-stage clip-path morphing. Hover freezes the animation. Gradient background-position animation.

<div class="clover-morphing-shape"></div>

10. .clover-rainbow-spinner

12-segment conic-gradient ring. Moiré interference pattern. 3 orbiting particles. Breathing core dot.

<div class="clover-rainbow-spinner"></div>

11. .clover-parallax-section

4 parallax layers with depth-blur. 10 scattered star dots. Floating nebula orbs. Vignette overlay.

<div class="clover-parallax-section">
  <div>Your content here</div>
</div>

12. .clover-flip-card-3d

True 3D rotateY(180deg) flip. Edge light strip. Ground reflection plane. Hover tilt micro-interaction.

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

13. .clover-expand-search

Collapsed circle → expanded pill. 5-particle burst on focus. 3 concentric wave rings.

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

14. .clover-notification-bell

CSS-drawn bell icon. Swinging clapper. Badge bounce. 3-ring ripple. Staggered dropdown tray.

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

15. .clover-drag-ghost

5-layer ghost trail via box-shadow. Detached shadow. Particle burst. Magnetic snap.

<div class="clover-drag-ghost">Drag Me</div>

🎨 Theming

Every component exposes custom properties. Theme globally or per-instance:

Global Theme

:root {
  --clover-glass-blur: 24px;
  --clover-clay-bg: #e8e0f0;
  --clover-neubrutal-bg: #00ff88;
  --clover-cyber-border-color-1: #ff4444;
}

Per-Instance

<div class="clover-glass-card" style="--clover-glass-pulse-duration: 2s;">
  Faster pulse!
</div>

🌓 Dark Mode

Dark mode is automatic via prefers-color-scheme: dark. Each component has built-in dark variants. For manual control:

<link rel="stylesheet" href="clover.css">
<link rel="stylesheet" href="clover-dark.css"> <!-- Force dark -->

♿ Accessibility

• All components respect prefers-reduced-motion: reduce (disables all animations)
• :focus-visible states on every interactive component
• Sufficient contrast ratios in both light and dark modes
• No pointer-events: none on interactive elements

🌐 Browser Support

⚡ Performance

Despite the complexity, Clover CSS is performant:

• Modern GPUs handle backdrop-filter, box-shadow, and transform efficiently
• SVG filters are GPU-accelerated in all modern browsers
• prefers-reduced-motion eliminates all animations for accessibility
• No JavaScript means zero runtime overhead
• Minified file size: ~35KB gzipped (full library)

🤝 Contributing

We need more insane components. Can you make a:

• .clover-weather-widget with 47 keyframe weather animations?
• .clover-audio-visualizer using pure CSS bar animations?
• .clover-particle-field with 100+ box-shadow particles?

Submit a PR at github.com/spideythedev/clover-css.

Clover CSS v1.0.0 · GitHub · MIT License · Made with 🍀 and questionable life choices