# Styling
The Styling tab allows you to set specific styling to the background of blocks, such as Blend Mode, Clips, Filters and Clip Paths.
The Styling tab is located inside the Background tab in the Design tab.
## Blend Mode
The Background Blend Mode property defines how the background image should be merged with the background colour, including: Inherit, Normal, Multiply, Screen, Overlay, Darken, Lighten, Colour-Dodge, Colour-Burn, Hard-Light, Soft-Light, Difference, Exclusion, Hue, Saturation, Colour, Luminosity.
{% hint style="info" %}
The Background Blend Mode property only appear when an image has been selected for the [Background Type](/design/backgrounds/background-type.md).
{% endhint %}
### Options
***Inherit** The* blend mode is inherited.
***Normal*** The block does not blend.
***Multiply*** Defines the blend mode to multiply.
***Screen*** Defines the blend mode to screen.
***Overlay*** Defines the blend mode to overlay.
***Darken*** Defines the blend mode to darken.
***Lighten*** Defines the blend mode to lighten.
***Colour-Dodge*** Defines the blend mode to colour-dodge, lightens the colours of the base layers and reduces the contrast resulting in saturated mid-tones.
***Colour-Burn*** Defines the blend mode to colour-burn, darkens the colours and increases the contrast of the base colours, then blends the colours of the blending layer.
***Hard-Light*** Defines the blend mode to hard-light, the transition between light and shadows is very harsh and defined.
***Soft-Light*** Defines the blend mode to soft-light, the transition between light and shadows is more of a gradient and much smoother.
***Difference*** Defines the blend mode to difference.
***Overlay*** Defines the blend mode to overlay, a colour tint is added.
***Exclusion*** Defines the blend mode to exclusion.
***Hue*** Defines the blend mode to hue, the background colour in degrees.
***Saturation*** Defines the blend mode to saturation, the amount of grey.
***Colour*** Defines the blend mode to colour.
***Luminosity*** Defines the blend mode to luminosity, the amount of brightness.
### Select
* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Blend Mode property.
* Select the desired option in the dropdown: (Inherit, Normal, Multiply, Screen, Overlay, Darken, Lighten, Colour-Dodge, Colour-Burn, Hard-Light, Soft-Light, Difference, Exclusion, Hue, Saturation, Colour, Luminosity).
### Remove
* Select an block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Blend Mode property.
* Click blue dot to remove.
## Clip
The Clip property allows a background to be clipped by various elements (Border-box, Text...)
### Options
***inherit*** Inherits the clip property set by the parent block.
***border-box*** Allows the background to extend all the way to the outside edge of the element's border.
***padding-box** C*lips the background at the outside edge of the element's padding and does not let it extend into the border.
***content-box*** Background extends underneath the element's content box.
***text** A*llows a background image to be clipped by a text element.
### Select
* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Clip property.
* Select desired option in dropdown.
### Remove
* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Blend Mode property.
* Find option to be removed.
* Click blue dot to remove.
## Filters
To get a complete list and description of the filters available, check the Filters documentation.
{% content-ref url="/pages/RfirBIABcn69qGuHJZip" %}
[Filters](/design/effects/filters.md)
{% endcontent-ref %}
### Select
* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the desired filter.
* Input or slide to add required amount of selected filter(s).
### Remove
* Select a block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the desired filter.
* Click blue dot to remove.
## Clip Path
The Clip Path property creates a clipping region that defines what part of an entire element should be displayed, such as Blob or Shape type.
{% hint style="warning" %}
The Clip Path property is only available on a Div block.
{% endhint %}
### Toggle
* Select a div block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Clip Path property.
* Toggle on/off as required.
### Blob
The Blob property allows you to add creative shapes to your Div to add a unique flavour to your page or post.
You can customise the height, generate a random blob, or a more complex one.
{% hint style="info" %}
By default, the Blob property is toggled on so if you want to construct your own clip paths, you need to toggle Blob off.
{% endhint %}
### Toggle
* Select a div block.
* Open the Block Inspector.
* Navigate to the Design Tab.
* Open the Background Tab.
* Open the Styling Tab.
* Find the Clip Path property.
* Toggle on.
* Find Blob property.
* Toggle on/off as required.
### Modify
When the Blob property is toggled on, you can customise the height, generate a random blob, or a more complex one to suit your needs.
* Find Blob property(ies) you wish to customise.
* Input Height, Random, Complex units as required.
### Remove
* Click blue dot to remove required customisation(s).
### Shape Type
You can customise the background of a selected div by choosing a Shape Type such as Polygon, Ellipse or Circle and modifying the size (height, width) and position (distance from left or top).
{% hint style="info" %}
Blob must be toggled off to select a Shape Type.
{% endhint %}
### 
### Polygon
The Polygon shape type allows you to choose between different polygon shapes for your background clipping area. You can add a point(s) and/or further modify each Point (top, left) of the Polygon.
***Top*** Allows you to choose the height of a point (vertical axis).
***Left*** Allows you to choose the horizontal position of your point (horizontal axis).
### Select
* Find Shape type
* Select Polygon in dropdown.
### Remove
* Click blue dot next to Shape type to remove.
### Poligon Points
The Polygon Points parameter allows you to modify, add or remove points on your polygon to create even more complex shapes.
### Modify
* Find Shape type
* Select Polygon in dropdown
* Find Points
* Modify desired point (Top, Left).
### Remove
* Click "-" icon to remove a point.
### Add
* Click "+" icon to add a new point.
* Modify as required.
### Ellipse
The Ellipse Shape type allows you to choose an ellipse shape for your background clipping area. You can further modify the Height, Width and Position (Left, Top).
### Modify
* Find Shape Type.
* Select ellipse in dropdown.
* Modify height, width, position (left, top).
### Remove
* Find Shape Type.
* Click blue dot to reset.
### Circle
The Circle shape type allows you to choose a circle for your background image clipping area. You can modify the diameter (Centre) and position (Left (Horizontal), Top (Vertical)).
### Select
* Find Shape type.
* Select Circle in dropdown.
### Modify
* Modify Centre, Left, Top.
### Remove
* Find Shape Type.
* Click blue dot to reset.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cwicly.com/design/backgrounds/styling.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.