Tag: background-clip

CSS – background-clip property

Posted on by NY Comdori

background-clip property enables you to display until what area/contents the background.
There are 4 types of background-clip: border-box, padding-box, content-box, text.
Each type represents the boundary of the background render. border-box means the background will be rendered to the border.
padding-box to the padding, content-box to the content, and text-box to the text.

Example

It would be much easier if you see the example.

border-box
padding-box
content-box
text

HTML Code

Here is the code for html

<div class="border-box">This is background clip border box</div>
<div class="padding-box">This is background clip padding box</div>
<div class="content-box">This is background clip content box</div>
<div class="text-box">This is background clip text box</div>

CSS Code

Here is the code for CSS. Please note that I used transparent in text class so that the color will be displayed. 

div {
  border: .8em darkviolet;
  border-style: double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(to right, #7ed56f, #28b485);
  font: 900 1.2em sans-serif;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

.text-box {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}