Animated Gradient Container

Create stunning animated gradient backgrounds with customizable color schemes, animations, and accessibility controls.

Description

The Animated Gradient Container block allows you to create beautiful, eye-catching gradient backgrounds with smooth animations. Perfect for hero sections, banners, or any area where you want to add visual interest to your website.

Key Features:

• 5 Predefined Gradient Schemes: Choose from Sunset, Ocean, Forest, Cosmic, and Rainbow color palettes
• 4 Animation Types: Horizontal slide, radial pulse, diagonal sweep, and rotation effects
• Speed Control: Adjustable animation speeds (slow, medium, fast)
• Accessibility First: Respects user motion sensitivity preferences with optional animation disable
• Responsive Design: Works seamlessly across all device sizes
• Live Preview: See your changes instantly in the editor
• Customizable Height: Set minimum height from 200px to 800px
• Blend Modes: Choose from various background blend modes for creative effects
• Pause Control: Toggle animations on/off as needed

Gradient Schemes:

• Sunset: Warm oranges, reds, and purples
• Ocean: Cool blues and teals
• Forest: Natural greens and earth tones
• Cosmic: Deep purples, blues, and cosmic colors
• Rainbow: Vibrant spectrum of colors

Animation Types:

• Horizontal Slide: Smooth left-to-right gradient movement
• Radial Pulse: Expanding circular gradient effects
• Diagonal Sweep: Corner-to-corner gradient transitions
• Rotation: 360-degree gradient rotation

The block automatically detects user motion preferences and can disable animations for users who prefer reduced motion, ensuring your site is accessible to everyone.

Installation

1. Upload the plugin files to the /wp-content/plugins/animated-gradient-container directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Add the "Animated Gradient Container" block to any post or page
4. Customize your gradient using the sidebar controls

Frequently Asked Questions

Will animations affect page performance?

The block uses optimized CSS animations that are hardware-accelerated for smooth performance. Animations are designed to be lightweight and efficient.

Can I disable animations for accessibility?

Yes! The block includes an accessibility toggle that respects user motion sensitivity preferences and allows you to disable animations entirely.

Is the block responsive?

Absolutely! The gradient container adapts to all screen sizes and maintains its visual appeal on mobile, tablet, and desktop devices.

Can I use this block multiple times on the same page?

Yes, you can add multiple animated gradient containers to the same page, each with its own settings and animations.

Does it work with all themes?

The block is designed to work with any properly coded WordPress theme. It uses standard block markup and CSS.

Screenshots

1. The block editor showing gradient customization options in the sidebar
2. Live preview of different gradient schemes in the editor
3. Frontend display of animated gradients on desktop
4. Mobile responsive view of the gradient container
5. Accessibility settings panel

Changelog

0.1.0

• Initial release
• 5 predefined gradient schemes
• 4 animation types with speed controls
• Accessibility features with motion sensitivity detection
• Responsive design
• Live editor preview
• Background blend mode options
• Pause/play toggle
• Adjustable container height

Performance

The Animated Gradient Container block is optimized for performance:

• Uses CSS transforms and opacity for hardware acceleration
• Efficient keyframe animations
• Minimal JavaScript footprint
• Respects user preferences for reduced motion
• Lightweight CSS output

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Graceful fallbacks are provided for older browsers, showing static gradients when animations aren't supported.