Animated Gradients

Animated Gradients

Animated Gradients adds an animated gradient background section block with an InnerBlocks content overlay, similar to the core Cover block.

Animated Gradients provides a cover-style section with an animated background and an InnerBlocks overlay for your content. It includes:

  • Presets (Prism, Lava, Plasma, Pulse, Vortex, Mist)
  • Custom 3-color mode
  • Optional noise overlay with opacity and scale controls
  • Content positioning options (center/top-left/etc.)
  • Works with common block supports (spacing, colors, typography, border, shadow, dimensions, layout, align, anchor)

Does this use WebGL?

No. This native block uses a performant CSS-based animated gradient background to avoid external dependencies and build steps.

Can I add any blocks inside?

Yes. It supports InnerBlocks (headings, buttons, groups, etc.).

Will it work with theme styles and block supports?

Yes. The root wrapper receives supports styles via get_block_wrapper_attributes(). The background layers are positioned so they do not interfere with spacing/typography/color supports.