---
title: "Gradients & Overlays"
description: "Create gradients and overlays in Bricks to add layered backgrounds, image treatments, and color effects."
canonical: "https://academy.bricksbuilder.io/builder/styling/gradients-overlays/"
markdownUrl: "https://academy.bricksbuilder.io/builder/styling/gradients-overlays.md"
pageType: "article"
section: "builder"
category: "styling"
lastmod: "2026-05-21T13:58:32.000Z"
---
Spice up your site's design by adding background, overlay, and text gradients to any element. When editing an element, the Gradients & Overlays control group is under the Style tab.

https://youtu.be/fHjio0iWkk8

## Available controls:

- **Apply to**: Select the type of content you want to add a gradient to (text, background, overlay).
- **CSS selector**: To target a specific HTML within an element.
- **Colors**: Add at least two colors to see a gradient. When you apply the gradient to an overlay make sure to reduce the color transparency in order to see through it.
- **Type**: Choose the gradient type—linear, radial, or conic.
- **Repeat (since 1.9.4)**: Allows the gradient to repeat across the element. Define 'stops' to control the transition points of each color, using units like percentages or pixels.

### Linear gradient controls:

- **Angle in °**: Set a specific angle for your linear gradient between 0 to 360°.

### Radial gradient controls:

- **Shape**: Choose between 'circle' or 'ellipse'.
- **Size**: Select from 'closest-side', 'farthest-side', 'closest-corner', 'farthest-corner'. For details on these settings, see the [Mozilla Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient#size).
- **Position**: Define the central point of the gradient.

### Conic gradient controls:

- **Starting angle in °**: Specify the starting angle of the gradient between 0 to 360°.
- **Position**: Set the gradient's center.