Package Exports
- css-mesh
Readme
CSS Mesh
Animated gradient backgrounds using CSS blur effects and positioned ellipses - no WebGL required.
âĻ Features
- ðĻ 20 Built-in Themes - 10 dark themes + 10 light themes, carefully curated and organized
- ⥠CSS-Based - Pure CSS blur effects, no WebGL or shaders required
- ðŠķ Lightweight - Small bundle size, no heavy 3D dependencies
- ðïļ Animation System - 6 animation types: float, pulse, rotation, orbit, wave, 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
- ðŊ 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>
);
}
ð Live Demo
cssmesh.dev - Explore all 20 themes, customize ellipses, try animations, and generate code in real-time.
ðĻ 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
Dark Themes (10)
Theme | Style | Colors |
---|---|---|
sunset |
Warm | Oranges & pinks |
ocean |
Cool | Blues & teals |
aurora |
Vibrant | Purples & greens |
cosmic |
Dark | Deep space colors |
forest |
Natural | Greens & earth tones |
monochrome |
Minimal | Grays & blues |
volcanic |
Dramatic | Reds & oranges |
electric |
Bold | Neon blues & purples |
neon |
Vibrant | Bright neon colors |
shapes |
Demo | Mixed geometric shapes |
Light Themes (10)
Theme | Style | Colors |
---|---|---|
minimal |
Clean | Soft blues & grays |
dreamy |
Soft | Pastel pinks & purples |
spring |
Fresh | Light greens & pastels |
sky |
Airy | Light blues & whites |
cream |
Warm | Cream & beige tones |
dawn |
Gentle | Soft oranges & pinks |
pearl |
Elegant | Pearl & lavender |
blush |
Delicate | Soft pinks & roses |
lavender |
Serene | Purple & lavender |
mint |
Cool | Mint green & aqua |
ðïļ Animation Types
float
- Gentle floating movementpulse
- Scale pulsing effectrotation
- Continuous rotationorbit
- Circular orbital motionwave
- Wave-like undulationhue
- Color hue shifting
ð 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
}
ð§ 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>
ð License
MIT License - see LICENSE for details.
CSS-based animated gradient backgrounds for React