<h1>Visualizing background‑clip</h1>

<h2>Background extends to outer-edge of the border box:</h2>
<div class="bc-border-box box">
	background-clip: border‑box
</div>

<h2>Background extends to outer-edge of the padding box:</h2>
<div class="bc-padding-box box">
	background-clip: padding‑box
</div>

<h2>Background extends to outer-edge of the content box:</h2>
<div class="bc-content-box box">
	background-clip: content‑box
</div>

<h2>Background is shown through the foreground text:</h2>
<div class="bc-text box">
	background-clip: text
</div>
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);

:root {
	/* Base font size */
	font-size: 10px;
}

*,
*::before,
*::after {
	box-sizing: border-box;	
}

body {
	font-family: "Source Code Pro", Courier, monospace;
	background: #080808;
	text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.4);
	text-align: center;
	line-height: 1.5;
	min-height: 100vh;	
	color: #fcfcfc;	
}

h1 {
	font-size: 5rem;
	font-weight: 600;
	margin: 1em 0;
}

h2 {
	font-size: 2.3rem;
	font-weight: 400;
	margin-bottom: 1em;
}

.box {
	font-size: 2.6rem;
	font-weight: 400;
	background-image: linear-gradient(
		to right,
		#ff3cac 0%,
		#562b7c 50%,
		#2b86c5 100%
	);
	background-origin: border-box;
	border: 1rem dotted #ff0;
	margin: 0 auto 6rem;
	padding: 4rem;
	max-width: 70rem;	
}

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

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.