Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by whatamesh.vercel.app.

Step 1

Upload Gradient.js to the child theme’s assets/js directory (“assets” and “js” folders will not be present by default, you’ll need to create them using a FTP client or a file manager plugin).

Step 2

Edit the child theme’s functions.php.

Locate

/**
 * Register/enqueue custom scripts and styles
 */
add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
} );

Below

wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );

add:

wp_register_script( 'animated-gradient', get_stylesheet_directory_uri() . '/assets/js/Gradient.js', [], null, true );

We are registering the script here so it can later be enqueued inside the Bricks page/template.

Step 3

Open your Bricks template/Page with Bricks editor.

Add a Section element.

Set its Padding on all sides to 0.

Set its Height to your desired value like 100vh or if you have a fixed header, something like calc(100vh - 150px) where 150px is your header’s height.

Above the Section’s Container, add a Code element having the following code.

<?php
wp_enqueue_script( 'animated-gradient' );
?>

<canvas id="gradient-canvas" data-transition-in />

<script type="module">
  import { Gradient } from '/wp-content/themes/bricks-child/assets/js/Gradient.js'

// Create your instance
const gradient = new Gradient()

// Call `initGradient` with the selector to your canvas
gradient.initGradient('#gradient-canvas')
</script>

If you have renamed your child theme’s directory, change bricks-child accordingly.

Toggle Execute code on.

Height: 100%

Position: Absolute
Top, Right, Bottom, Left: 0

Custom CSS:

#gradient-canvas {
  width:100%;
  height:100%;
  --gradient-color-1: #c3e4ff; 
  --gradient-color-2: #6ec3f4; 
  --gradient-color-3: #eae2ff;  
  --gradient-color-4: #b9beff;
}

Select the Container in the structure panel.

Align main axis: Center
Align cross axis: Center

Height: 100%

Add a Block inside the Container.

Align cross axis: Center

Padding: 40px on all sides

Max. width: 800px

Background color: rgba(248, 249, 251, 0.6)

Border Radius: 6px on all sides

Add your desired content in, say a Heading and Text.

Note: The animation will not appear in the editor. Check it on the front end.