Soft Background is a fully customizable animated background component for Framer. Smooth, blurred color orbs drift slowly across the canvas, creating a living mesh-gradient effect without any external dependencies.
Live Preview: https://softbackground.framer.website/
Features
10 color presets: Aurora, Blush, Mint, Dusk, Peach, Slate, Midnight, Ember, Forest, Noir
Custom color mode (base + 3 orb colors)
Mouse parallax with adjustable strength
Noise texture overlay with soft-light blending
Radial vignette effect
Fill Container mode — drops into any Framer frame at 100% size
Responsive demo panel with live preset switching, orb count, speed, and FX controls
Prefers-reduced-motion support for accessibility compliance
Up to 5 independent animated orbs with unique drift paths
Controls for blur, opacity, speed, and orb count
Perfect for
Landing pages
Hero sections
Portfolio backgrounds
SaaS dashboards
App loading screens, and any design that needs ambient depth without heavy assets.
No images, no external fonts, no dependencies beyond Framer's built-in Motion library.
Keywords
soft background, animated background, gradient background, mesh gradient, framer background component, dark mode background, parallax background, blob animation, color orbs, soft gradient, hero background, landing page background, aurora gradient, framer motion background, animated hero, ambient background, living gradient
Ahmet Loca
