TailwindCSS background gradient color

Background gradient colors utilities

Published 2021-06-08

You can use gradient in your page with the bgGradient utility. For example :

<div class="bg-gradient-to-br from-red-500 to-blue-700"></div>

You can also change the bg-gradient utility depending on the breakpoints.

<div class="bg-gradient-to-br from-red-500 to-blue-700 md:bg-gradient-to-r"></div>

There are 8 directions available.

It's possible to add a middle color using the via-color-500 utility.

<div class="bg-gradient-to-br from-red-500 to-blue-700 via-green-400"></div>

Some gradient examples :

Related Tutorials :