JAVASCRIPT · WORDPRESS GUTENBERG

animated-gradient-cover-block — GPU-Accelerated Gradient Cover Block for WordPress

animated-gradient-cover-block is a zero-dependency WordPress Gutenberg block for creating smooth, 60 FPS multi-stop animated gradient hero sections. It compiles editor color stops and blend angles into lightweight CSS custom properties with automatic reduced-motion accessibility support.

$ wp plugin activate animated-gradient-cover-block

GitHub ↗

Frame Budget 0.4 ms / 60 FPS

JS Runtime Payload 0 KB (Pure CSS)

Color Stops Up to 6 Stops

CLS Impact 0.000

Interactive Gutenberg Gradient Cover CSS & Block Markup Synthesizer CSS Gradient Color Stops (Hex / OKLCH) Animation Keyframe Curve & Angle

Deterministic Execution Output & Telemetry STATUS: READY // 0 ERRORS

Gutenberg Block Markup & CSS

<!-- wp:bhubbard/animated-gradient-cover {"angle":135,"duration":12,"stops":["#0A0A0C","#FF3366","#00F0FF"]} -->
<div class="wp-block-bhubbard-animated-gradient-cover" style="--grad-angle:135deg;--grad-duration:12s;background:linear-gradient(135deg,#0A0A0C,#FF3366,#00F0FF);background-size:300% 300%;animation:bhGradientShift 12s ease infinite;">
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"level":1} --><h1>Swiss Modernist Motion</h1><!-- /wp:heading -->
  </div>
</div>
<!-- /wp:bhubbard/animated-gradient-cover -->

Production Engineering Specifications

Repository:    https://github.com/bhubbard/animated-gradient-cover-block
Live Studio:   https://code.brandonhubbard.com/animated-gradient-cover-block/
Portal:        https://code.brandonhubbard.com/
Install:       wp plugin activate animated-gradient-cover-block
Design System: Brandon Hubbard Swiss Modernist (#0A0A0C / 1px Exposed Structural Grid)