Tailwind CSS - Background Image

Previous
Quiz
Next

Tailwind CSS Background Image is a utility that specifies the background image of an element.

Tailwind CSS Background Image Classes

The following is the list of Tailwind CSS Background Image Classes that are used to set the background image.

Class CSS Properties
bg-none background-image: none;
bg-gradient-to-t background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl background-image: linear-gradient(to top left, var(--tw-gradient-stops));

Functionality of Tailwind CSS Background Image Classes

  • bg-none: This class is used to remove the background image.
  • bg-gradient-to-t: This class sets a gradient background image that transitions from one color to another from bottom to top.
  • bg-gradient-to-tr: This class sets a gradient background image that transitions from one color to another from bottom-left to top-right.
  • bg-gradient-to-r: This class sets a gradient background image that transitions from one color to another from left to right.
  • bg-gradient-to-br: This class sets a gradient background image that transitions from one color to another from top left to bottom right.
  • bg-gradient-to-b: This class sets a gradient background image that transitions from one color to another from top to bottom.
  • bg-gradient-to-bl: This class sets a gradient background image that transitions from one color to another from top-right to bottom-left.
  • bg-gradient-to-l: This class sets a gradient background image that transitions from one color to another from right to left.
  • bg-gradient-to-tl: This class sets a gradient background image that transitions from one color to another from bottom-right to top-left.

Tailwind CSS Background Image Example

The following example will illustrate the different background image gradient effects.

Example

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Background Image Classes
    </h2>
    <div class="flex flex-wrap gap-3">
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-tr from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tr
        </div>
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-br from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-br
        </div>
        <div class="bg-gradient-to-b from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-b
        </div>
        <div class="bg-gradient-to-bl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-bl
        </div>
        <div class="bg-gradient-to-l from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-l
        </div>
        <div class="bg-gradient-to-tl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tl
        </div>
    </div>
</body> 

</html>
Print Page
Previous
Next