CSS Background Clip

AuthorHariom Prajapati

Pubish Date15 Aug 2022


It is use to defines gapping between element and background (color or image).


Syntax -

background-clip: value;




This is default value

It is use to extend back ground behind the boarder


It is use to extend back ground to inside edge of the boarder.

content-box  It is use to extend back ground to content box
Text It is use to set background only behind the text structure.(need prefix according to browser or OS like webkit, moz etc to run text value.)
Initial It is use to set back ground to default value


For example -

<!DOCTYPE html>
<html lang="en">

	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		h1 {
			background-size: 75% 75%;
			background-image: linear-gradient(to right, blue 0%, red 100%), url('download.jpg');
			background-repeat: no-repeat;
			background-blend-mode: darken;
			height: 300px;
			width: 300px;





Background clip