CSS Mesh

Animated gradient backgrounds using CSS blur effects and positioned ellipses - no WebGL required.

✨ Features

🎨 34 Built-in Themes - Organized into Base, Orb, Dramatic, and Special categories
🔮 Orb Mode - Floating circular gradients with 3D lighting and drop shadows
⚡ CSS-Based - Pure CSS blur effects, no WebGL or shaders required
🪶 Lightweight - Small bundle size, no heavy 3D dependencies
🎛️ Animation System - 7 animation types: float, pulse, rotation, orbit, wave, morph, hue
🖱️ Mouse Tracking - Interactive attract/repel modes with configurable intensity
🔧 Fully Customizable - Configure ellipse size, position, gradients, blur, and opacity
🎨 Visual Effects - Saturation, contrast, brightness, and hue adjustments
💡 3D Lighting - Realistic lighting overlays with position and intensity controls
🌑 Drop Shadows - Configurable shadows with direction, size, and opacity
🎯 TypeScript - Full type safety and IntelliSense support
📦 Smart Configs - Diff-based customization system for efficient overrides

🚀 Quick Start

npm install css-mesh

import { MeshGradient } from 'css-mesh';

function App() {
  return (
    <MeshGradient 
      theme="sunset" 
      animated={true}
      animationType="float"
    >
      <div>Your content here</div>
    </MeshGradient>
  );
}

// Orb Mode for AI Assistants
function ChatBot() {
  return (
    <MeshGradient
      theme="sunsetGlow"
      shape="orb"
      size={85}
      animated={true}
      animationType="morph"
      containerAnimation="rotation"
      dropShadow={32}
      lighting3d={{
        enabled: true,
        position: { x: 75, y: 15 },
        intensity: 0.85
      }}
    />
  );
}

🌐 Live Demo

cssmesh.dev - Explore all 20 themes, customize ellipses, try animations, and generate code in real-time.

CSS Mesh Demo Interface

CSS Mesh Orb Mode

📦 Installation

npm install css-mesh

NPM Package: https://www.npmjs.com/package/css-mesh

GitHub Repository: https://github.com/stevesouth/css-mesh

🎨 CSS-Based Approach

CSS Mesh creates beautiful animated gradients using pure CSS techniques:

✨ Key Qualities

Pure CSS animations - Leverages browser-native CSS blur and transforms
Lightweight bundle - Minimal dependencies, fast loading
Familiar patterns - Standard CSS/React patterns for easy customization
Drop-in component - Simple integration with familiar React props
Reliable performance - Predictable CSS animations that work everywhere

🎯 Perfect For

Landing page backgrounds
Hero sections
App backgrounds
Marketing sites
Any project wanting beautiful animated gradients

🎨 Available Themes (34 Total)

🔮 Orb Themes (14) - Optimized for floating circular gradients

Theme	Style	Colors	Background
`cyberpunk`	Neon	Electric green & pink	Dark
`voidPulse`	Mystical	Deep purples & blues	Black
`fireCore`	Intense	Fiery oranges & reds	Dark
`deepSpace`	Cosmic	Space blues & purples	Dark
`shadowGlow`	Dramatic	Dark with bright accents	Black
`sunsetGlow`	Premium	Warm sunset enhanced	Dark
`twilightDark`	Rich	Purple twilight colors	Dark
`midnightGlow`	Electric	Bright blues & cyans	Black
`crystalBlue`	Cool	Crystal blue tones	Light
`sunbeam`	Bright	Golden yellow rays	Light
`roseDawn`	Elegant	Pink & purple dawn	Light
`mintFresh`	Cool	Fresh mint greens	Light
`lavenderMist`	Soft	Lavender & purple	Light
`dawnLight`	Warm	Soft golden dawn	Light

🎨 Base Themes (13) - Classic gradient backgrounds

Theme	Style	Colors	Background
`sunset`	Warm	Oranges & pinks	Dark
`ocean`	Cool	Blues & teals	Dark
`aurora`	Vibrant	Purples & greens	Dark
`cosmic`	Dark	Deep space colors	Dark
`forest`	Natural	Greens & earth tones	Dark
`monochrome`	Minimal	Grays & blues	Dark
`minimal`	Clean	Soft blues & grays	Light
`spring`	Fresh	Light greens & pastels	Light
`sky`	Airy	Light blues & whites	Light
`cream`	Warm	Cream & beige tones	Light
`dawn`	Gentle	Soft oranges & pinks	Light
`pearl`	Elegant	Pearl & lavender	Light
`blush`	Delicate	Soft pinks & roses	Light

⚡ Dramatic Themes (4) - Bold, intense gradients

Theme	Style	Colors	Background
`volcanic`	Dramatic	Reds & oranges	Dark
`electric`	Bold	Neon blues & purples	Dark
`neon`	Vibrant	Bright neon colors	Dark
`dreamy`	Soft	Pastel pinks & purples	Light

✨ Special Themes (3) - Unique features and shapes

Theme	Style	Colors	Background
`shapes`	Demo	Mixed geometric shapes	Dark
`lavender`	Serene	Purple & lavender	Light
`mint`	Cool	Mint green & aqua	Light

🎛️ Animation Types

float - Gentle floating movement (default)
pulse - Scale pulsing effect
rotation - Continuous rotation
orbit - Circular orbital motion
wave - Wave-like undulation
morph - Organic morphing animation
hue - Color hue shifting (container-level)

📖 API Reference

MeshGradient Props

interface MeshGradientProps {
  theme?: string;                          // Theme name (default: 'sunset')
  customConfig?: Partial<BackgroundConfig>; // Custom ellipse configuration
  className?: string;                      // Additional CSS classes
  style?: React.CSSProperties;             // Custom styles
  children?: React.ReactNode;              // Content to overlay
  animated?: boolean;                      // Enable animations (default: false)
  animationType?: AnimationType;           // Animation type (default: 'float')
  animationConfig?: Partial<AnimationConfig>; // Animation settings
  containerAnimation?: ContainerAnimationType; // Container-level animations
  mouseTracking?: MouseTrackingConfig;     // Mouse interaction settings
  visualEffects?: VisualEffectsConfig;     // Color/visual adjustments
  shape?: 'background' | 'orb';           // Display mode (default: 'background')
  size?: number;                          // Orb size percentage (default: 80)
  dropShadow?: number | boolean;          // Drop shadow size or enable (default: false)
  dropShadowOpacity?: number;             // Shadow opacity 0-1 (default: 0.4)
  dropShadowDirection?: { x: number; y: number }; // Shadow direction (default: {x: 0, y: 8})
  lighting3d?: {                          // 3D lighting overlay
    enabled: boolean;
    position?: { x: number; y: number };  // Light position 0-100% (default: {x: 30, y: 30})
    intensity?: number;                   // Light intensity 0-1 (default: 0.3)
  };
}

🔧 Custom Configuration

Create your own ellipse configurations:

const customConfig = {
  backgroundColor: '#1a1a2e',
  shapes: [
    {
      id: 'custom-1',
      width: 80,        // Percentage of container width
      height: 30,       // Percentage of container height  
      x: -10,           // X position (percentage, can be negative)
      y: 20,            // Y position (percentage, can be negative)
      gradient: 'radial-gradient(ellipse, #ff6b6b 0%, #ee5a24 100%)',
      blur: 60,         // Blur intensity in pixels
      opacity: 0.7,     // Opacity (0-1)
      zIndex: 1,        // Stacking order
      shape: 'ellipse', // Shape type
    },
    // ... more ellipses
  ],
};

<MeshGradient customConfig={customConfig}>
  <YourContent />
</MeshGradient>

🖱️ Mouse Tracking

<MeshGradient 
  theme="sunset"
  mouseTracking={{
    enabled: true,
    mode: 'attract',    // 'attract' or 'repel'
    intensity: 0.3,     // 0-1 strength
    radius: 30          // Effect radius in pixels
  }}
>
  <YourContent />
</MeshGradient>

🔮 Orb Mode

Create floating circular gradients perfect for AI assistants and modern interfaces:

<MeshGradient
  theme="cyberpunk"
  shape="orb"
  size={85}
  animated={true}
  animationType="morph"
  containerAnimation="rotation"
  dropShadow={32}
  dropShadowOpacity={0.6}
  dropShadowDirection={{ x: 0, y: 12 }}
  lighting3d={{
    enabled: true,
    position: { x: 75, y: 25 },
    intensity: 0.8
  }}
/>

💡 3D Lighting & Shadows

Add realistic depth with lighting and shadows:

<MeshGradient
  theme="deepSpace"
  lighting3d={{
    enabled: true,
    position: { x: 30, y: 30 },  // Light position (0-100%)
    intensity: 0.5               // Light intensity (0-1)
  }}
  dropShadow={25}                // Shadow size in pixels
  dropShadowOpacity={0.4}        // Shadow opacity (0-1)
  dropShadowDirection={{ x: 5, y: 10 }} // Shadow offset
>
  <YourContent />
</MeshGradient>

## 📄 License

MIT License - see [LICENSE](./LICENSE) for details.

---

*CSS-based animated gradient backgrounds for React*