Skip to content
Related Articles

Related Articles

Tailwind CSS Background Clip

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022

This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS background-clip property. This property is used to define how to extend background (color or image) within an element.

Background Clip Classes:

  • bg-clip-border: This class is used to set the background color spread over the whole division.
  • bg-clip-padding: This class is used to set the background inside the border.
  • bg-clip-content: This class is used to set the background color to the content only.
  • bg-clip-text: This class is used to crop an element’s background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.


<element class="bg-clip-{Clip type}">...</element>



<!DOCTYPE html> 
    <link href=
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
    <b>Tailwind CSS 
    <span class="bg-clip-text text-lg text-transparent 
                 from-green-400 to-blue-500">
        Background Clip Class
    <div class="mx-2 grid grid-cols-3 gap-2 bg-green-200 rounded-lg">
        <div class="bg-clip-border p-6 bg-green-600 border-dashed
                    border-4 border-green-300">
        <div class="bg-clip-padding p-6 bg-green-600 border-dashed
                    border-4 border-green-300">
        <div class="bg-clip-content p-6 bg-green-600 border-dashed
                    border-4 border-green-300">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!