VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-background-clip/

⇱ Tailwind CSS Background Clip - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Background Clip

Last Updated : 23 Jul, 2025

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:

Class NameDescription
bg-clip-borderThis class is used to set the background color spread over the whole division.
bg-clip-paddingThis class is used to set the background inside the border.
bg-clip-contentThis class is used to set the background color to the content only.
bg-clip-textThis 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.

Syntax

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

Example: In this example we are using Tailwind CSS for styling. It includes a large heading, styled text with gradient background clipping, and three divs demonstrating different background clip effects within a grid layout.

Output:

👁 Image
Comment