# Background Colors

Allows you to add a background and/or overlay colour to the background.

<figure><img src="https://lh5.googleusercontent.com/hCalinQjVFaYk-5hGpOZpG_VEwVcZzjf51nqWaIMAlcUvHFx-udiYTHPxEYDuESxhDyic9x1XbQWJ9gZcVi_-IzDttl5YR-J0lzU9CBOFJD5K9vN4mDGDFSNyOB8fxGLYjQfGc7FVYBxZGZrw1O-U_XuOmurpQAWsTe_F_RtitigqlqMbo2tkiwvT7ezfw" alt=""><figcaption></figcaption></figure>

## Background Colour

The Background Colour property defines the colour of the background of the block.

You can choose a colour in the colour picker, a Global Colour or a Colour Gradient which can be linear or radial.

### Add a Background Colour

For blocks with background capabilities:

![](https://lh3.googleusercontent.com/_WPFyuuBJ9m8oQZyUUdM7NEyNN3INCOhGNItB837C3c0E5Ehlp-9RCV-1GKTNMOLEkR8kZCQz1EB6xCX3BCe-VB81mec-6xRMsNv5XlD3jQfJ8O4_cFCRjievTICL4OxOVwRKUYcbk7y6GVB2vz1ZDo9k5hMnGKbLVUgagzcBwXakmea1gZdwl2yYjwEDg)

* Select a block.
* Open the Block Inspector.
* Navigate to the Primary Tab.
* Find the Background property.
* Open the colour picker by clicking on the colour circle.
* Select required colour (colour picker, global colour, gradient (linear or radial)).

To modify any block's background colour:

![](https://lh3.googleusercontent.com/k246hW5Xu6OvtQ157P6LXGQzJl6YUG9lcXH9kMJFrwbnglwiqInUn_thdFGq4F9vLxGR-iEgzOIUfizv3uaRF1N6W2bb-WZAeC1MYhIDjk31P23adNdEIBTdGsoOsfgvONeJbWCpuWk8mjeQXRsX5YTWfFOwzdMh1WGWjDekMJ9nizuDAJt7Mz5hRGsTwQ)

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Colours Tab.
* Find the Overlay property.
* Open the colour picker by clicking on the colour circle.
* Select a colour (colour picker, global colour, gradient (linear or radial)).

### Reset Background Colour

For most blocks with background capabilities:

![](https://lh3.googleusercontent.com/4JTfaublJi4nsczM3ZawegtL8gzq4bxnyo78DTczSPXIir08rg6ktskj0JDv0H_ixhcN5kOE702S1z6SYbHqt1OSFRCe-c3SLKMlfrOyzBkI3KETKVoa54QACEVTh6xqtCI92UL7zfKCR0QJ3kEFcwBGvGsDDF90YRvGkYHRhM3TxDPZIVJKDXIsauaN4Q)

* Select a block.
* Open the Block Inspector.
* Navigate to the Primary Tab.
* Find the Background property.
* Click dot to reset.

To reset any block's background colour:

![](https://lh6.googleusercontent.com/mGVcLBSx33Q3TFTqxWo15byT4-1eiyTMZpOrC7QU42tYDzzrJ9lWkYe_EMgyJ_I6lYPwtU3ch5cn7e3ZXYSStVn2Bl1DENR3ckaZcBRHMhhpWZfJbh1M6aAqNHYWPO_vZl3oYLP3dZOx8JQS0wWz_lX0KibF-rS4Jofii-vmbp2s8sZ_OuUryzqaj3F-kg)

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Find the Background property.
* Click dot to reset.

## Overlay Colour

<figure><img src="https://lh5.googleusercontent.com/SSpOAbItJeChUc6FitgGajB3qXKzNxloS8HLYhkESPGb7S0GqWChw7RHfLCO863JASJaw8GJmtf_OOnirRUaQhZSYd3sow22PMbcqvt1OLrUmHeKNUuywEjmt7oMoKeN6TcsQEB_AAhqY3CmsYCTVqs" alt=""><figcaption></figcaption></figure>

The Background Overlay property defines the colour of the overlay that covers the block.

{% hint style="info" %}
Overlay works on all blocks except images.
{% endhint %}

### Add an Overlay Colour

<figure><img src="https://lh5.googleusercontent.com/3xA_UJcLq8jgR_053Q0r2HpdX6kGthXRTmobifGX_YK5RxTyZ3CrXZdrXcGnUH5PU2IA46Js2kPGzZtWehVBbs9HtHEAJbTdAfO_FXGVZ4mG2z9QeDo53ihImIHjy0Bvp8F0N-8qSLluozpnANYTdxc" alt=""><figcaption></figcaption></figure>

* Select a block.
* Open the Block Inspector.
* Navigate to the Design tab.
* Open the Background tab.
* Open the Colour tab.
* Find Overlay.
* Open the colour picker by clicking on the colour circle.
* Select a colour (colour picker, global colour, gradient (linear, radial or conical)).

### Reset Overlay Colour

* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Colours Tab.
* Find the Overlay property.
* Click dot to reset.

<figure><img src="https://lh3.googleusercontent.com/7VhruI-bu_ndxdfNNMgh199XWIFsL3p2F4I3A8T1SYI50G1wdl9MKfas7DrXOr0D8wKuvM4tySdwX71f537yVPvPVSp3Bbl3k0e6VFt6hnuvQDlCwDD4EtdIsejZ4AUYFaQuIt0OMuYESKzTWSVbdCc" alt=""><figcaption></figcaption></figure>

* Without Overlay.

<figure><img src="https://lh3.googleusercontent.com/JKuvbJiZjoCPw8TSG6nY9MbMBJNuOB4z1rtohNVsRYWXsagBIdxEne99UzUP1xOeK30f8hXAXGrWnFDb7To0fV1EqOXVEdJ6OFXOimXl6qY3JShaV2j4U88XIdAGEs1vdX7bTceBYQPtFSRzlqDRDH4" alt=""><figcaption></figcaption></figure>