How to Add an Animated Gradient Background in WordPress (CSS or WebGL)

To add an animated gradient background in WordPress, either paste a short CSS gradient animation onto a Group block, or install Animation Kit, select a Group or Cover block, switch on Animated background and choose Aurora or Silk in your brand colours. CSS suits a simple two-colour shift; WebGL suits a rich, flowing look with phone and reduced-motion handling built in.

Option 1: a CSS gradient animation

For a gentle shift between a few colours, CSS is enough.

1. Select the Group block you want to animate (a hero or a call-to-action band).
2. In Advanced → Additional CSS class(es), add animated-gradient.
3. Add this CSS under Appearance → Editor → Styles → Additional CSS (block themes) or Appearance → Customize → Additional CSS (classic themes):

.animated-gradient {
  background: linear-gradient(120deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 300% 300%;
  animation: gradient-shift 18s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
}

Keep it slow (15–30 seconds per cycle) and the colours close in brightness. The reduced-motion rule stops the animation for visitors who ask their device to.

Limits: it's a linear blend sliding back and forth — no flowing shapes, no depth, no pointer response — and you edit code to change it.

Option 2: a WebGL gradient with Animation Kit (free)

Animation Kit draws richer gradient-like motion with WebGL. Two of its free effects suit a gradient look:

• Aurora — flowing colour washes, like northern lights. See how to add an aurora background.
• Silk — slow, fabric-like folds. Calm and premium.

One section:

1. Install Animation Kit and edit the page.
2. Select the hero's Group or Cover block.
3. In the block settings, switch on Animated background, choose Aurora or Silk and set your colours.
4. Add the readability overlay if text sits on top, and choose what phones get — full, lighter, a still image or nothing.

Whole site: open Animation Kit → Background Animation, choose the effect, set colours and switch it on.

Animation Kit Pro adds gradient-style effects — Grainient (grainy gradient), Gradient Blinds, Color Bends, Iridescence and Soft Aurora — and speed and scale controls for every effect, so you can make the motion slower or the shapes larger. Try them on the effects demo.

CSS or WebGL?

Use CSS for a subtle two-colour shift on a small element, such as a button or a thin banner. Use Animation Kit for a hero or full-page background that should feel premium, or when someone other than a developer will change it later.

Choosing colours

• Brand + neighbour. Your main brand colour plus one or two shades next to it on the colour wheel look intentional. Opposite colours (blue and orange) turn muddy where they blend.
• Dark or light, not both. Keep all colours in a similar brightness range so text contrast holds everywhere.
• Light sites. For white or pale sites, start from Animation Kit's light-site looks — pale washes that don't overpower content.
• Text on top. Use the readability overlay, and test the brightest moment of the animation, not just the first frame.

Performance

A CSS animation of background-position repaints the section on every frame, which is cheap on small areas but adds up on a full-screen hero on a slow phone. Animation Kit runs on the GPU, loads only the effect you chose, starts after the page content, and pauses when the tab is hidden or the background scrolls out of view. Either way, test with your speed tool on a mid-range phone.

For more effects, see the animated background plugin comparison and animated vs video backgrounds.