Skip to content
  • There are no suggestions because the search field is empty.

Background Gradients (Collection 2.0)

On Collection 2.0, 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 2.0 Overview