Tailwind CSS - Background Clip

Previous
Quiz
Next

Tailwind CSS Background Clip is a utility that specifies the clipping behavior of background within an element.

Tailwind CSS Background Clip Classes

The following is the list of Tailwind CSS Background Clip classes that are used to set the clipping behavior of background.

Class CSS Properties
bg-clip-border background-clip: border-box;
bg-clip-padding background-clip: padding-box;
bg-clip-content background-clip: content-box;
bg-clip-text background-clip: text;

Functionality of Tailwind CSS Background Clip Classes

  • bg-clip-border: This class is used to clip the background to the border box, setting background property over the whole container, including border and padding.
  • bg-clip-padding: This class is used to clip the background to the padding box, setting background property over the whole container excluding borders.
  • bg-clip-content: This class is used to clip the background to the content box, setting background property over the content excluding border and padding.
  • bg-clip-text: This class is used to clip the background to the text, setting the background property within the text only.

Tailwind CSS Background Clip Examples

The following example will illustrate the different utility of Background Clip classes.

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 Clip Border, Padding, and Content Classes
    </h2>
    <div class="flex gap-3">
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-border bg-green-600 p-4 text-white">
            Background-clip-border
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-padding bg-green-600 p-4 text-white">
            Background-clip-padding
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-content bg-green-600 p-4 text-white">
            Background-clip-content
        </div>
    </div>
</body>

</html>

Example

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

<body class="p-4">
    <h2 class="text-2xl font-bold mb-5 text-center">
        Tailwind CSS Background Clip Text Classes
    </h2>
    <div class="text-6xl text-center font-extrabold 
                text-transparent bg-clip-text" 
            style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')"
    >
        Tutorialspoint
    </div>
</body>

</html>
Print Page
Previous
Next