---
title: "Background Gradients (Collection)"
url: "https://support.sardius.media/knowledge-base/collection-background-gradients-guide"
category: "Layouts (Collection)"
updated: 2026-09-29
summary: "On Collection, background gradients can appear behind a video, asset view, or home page. Instead of showing a flat solid color, you can blend two or more colors smoothly. This can be customized to enhance contrast or match branding. Example linear-gradient(to bottom, rgba(0, 34, 45, 1), rgba(0, 0,…"
---

# Background Gradients (Collection)

On Collection, background gradients can appear behind a video, asset view, or home page. Instead of showing a flat solid color, you can blend two or more colors smoothly. This can be customized to enhance contrast or match branding.

### Example

linear-gradient(to bottom, rgba(0, 34, 45, 1), rgba(0, 0, 0, 0)

### How to Customize It

- **Change direction**:
  - `to bottom` = top → bottom.

  - `to right` = left → right.

  - `45deg` = diagonal.

- **Change colors**:
  - You can replace the rgba values with your own.

- - Example: rgba(255, 0, 0, 1) = solid red.

- - Example: rgba(255, 255, 255, 0.5) = semi-transparent white.

- **Change transparency**:
  - The last number is alpha (0–1).

- - 1 = fully solid.

- - 0.5 = 50% see-through.

- - 0 = fully invisible.

### For Example:

If you wanted a background that fades from blue at the top to white at the bottom, you could type:

linear-gradient(to bottom, rgba(0, 0, 255, 1), rgba(255, 255, 255, 1))

If you wanted a background that fades from solid black into transparent, you’d use:

linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))

### In Short:

- The first color is where the gradient starts.
- The second color is where it ends.
- The last number (alpha) controls how transparent the color is.

### Gradient Cheat Sheet Examples: 

#### **1. Black Fade (Top to Transparent)**

- Good for dark overlays behind text.
- `linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))`

#### **2. White Fade (Top to Transparent)**

- Useful for light themes.
- `linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))`

#### **3. Brand Blue Overlay**

- Blue that fades into transparent.
- `linear-gradient(to bottom, rgba(0, 102, 204, 0.8), rgba(0, 102, 204, 0))`

#### **4. Diagonal Black Fade**

- Creates a corner shadow effect.
- `linear-gradient(45deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))`

##### **5. Dark to Light Fade**

- Smooth dark → light background.
- `linear-gradient(to bottom, rgba(30, 30, 30, 1), rgba(200, 200, 200, 1))`

#### **6. Two-Color Gradient (Blue → Purple)**

- Modern blended effect.
- `linear-gradient(to right, rgba(0, 102, 204, 1), rgba(153, 0, 204, 1))`

#### **7. Subtle Transparent Overlay**

- Barely visible overlay for soft contrast.
- `linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0))`

###  How to Use These

1. Copy one of the values above.
2. Paste it into the **Asset View Background Gradient** field in your layout settings.
3. Click **Update**.
4. Preview your asset view to see the effect.

---

[<-- Return to Collection Overview](https://support.sardius.media/knowledge-base/customizing-the-collection-20-layout-overview)