Background image

Class reference

# Linear gradients

To give an element a linear gradient background, use one of the bg-gradient-{direction} utilities, in combination with the gradient color stop utilities.

<div class="h-24 rounded bg-gradient-to-90 from-orange-300 via-red-400 to-pink-500"></div>

# Stop opacity

Adjust the opacity of each color stop by using the gradient stop opacity utilities.

<div class="h-24 rounded bg-gradient-to-90 from-orange-300 via-red-400 via-opacity-25 to-pink-500"></div>

# Stop position

Control the position of each stop by using the gradient stop position utilities.

<div class="bg-gradient-to-90 from-orange-300 via-red-400 via-stop-15 to-pink-500 to-stop-30"></div>

# Background Images

Use background image classes along side background position, size, repeat, clip etc for fine grained control over your backgrounds. You can even use blend-modes to create complex layered effects.

# Transparent Image

Setting a text color using .text-* will change the background image color.

<div class="text-blue-200 bg-transparent-image"></div>

# Stripes

Setting a text color using .text-* will change the background image color.

<div class="text-blue-200 bg-stripes"></div>

# Circles

This background image uses CSS Masks, setting the Background Color using the .bg-* will change the background image color.

<div class="bg-pink-300 bg-circles"></div>

# Waves

This background image uses CSS Masks, setting the Background Color using the .bg-* will change the background image color.

<div class="bg-orange-400 bg-waves"></div>

# Responsive

To control the background image of an element at a specific breakpoint, add a {screen}: prefix to any existing background image utility. For example, use md:bg-gradient-to-r to apply the bg-gradient-to-r utility at only medium screen sizes and above.

<div class="bg-gradient-to-r md:bg-gradient-to-t ..."></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.