Customize the background of every Gutenberg block with any color you wish. Utilize several gradient options, including linear and radial settings. Want a block background to be an image? Select any image you like to serve as a background to any WordPress block.
- Color
- Gradient
- Images
- Alpha Transparencies
Background Color
To select a background color for your WordPress block, select the block you wish to customize.
![Block Styles background color setting.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-104201-1024x365.png)
You are given the option to select a pre-set color, as well as further customization options.
![Block Styles backgrounds color selection.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-100830-1.png)
![Block Styles custom color view.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-140522-1.png)
![Block Styles color type selection.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-114038-1.png)
Background Gradient
To give your WordPress block a gradient background, select Gradient on the Backgrounds menu.
![Block Styles for WordPress gradient background selection.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-135954-1-1024x375.png)
You are given the choice to choose present gradient backgrounds and adjust them using the bar below.
![Block Styles for Gutenberg gradient type selection.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-140304-1.png)
Select Linear or Radial for the type of gradient background you want, including angle specifications.
Background Image
You can also select a custom background image to use with any WordPress block. Select the Image button and then Set background image.
![Block Styles background image selection.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-142251-1.png)
Once you have selected your background, you can adjust the placement of the image, as it corresponds with the block.
![Block Styles backend WordPress view after choosing image as block background.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-143335-1-1024x299.png)
Control the placement of the background image by using the cursor on the image or the custom options below.
![Block Styles for WordPress custom options for background block image.](https://blockstyles.com/wp-content/uploads/2022/04/Screenshot-2022-04-06-143902-1.png)
Background Coming Soon
- Video Backgrounds (Coming soon)
- Multiple Backgrounds (Coming soon)
Leave a Reply