<div class="sample01">
SAMPLE01
</div>
<div class="sample02">
<p>SAMPLE02</p>
</div>
<div class="sample03">
<p>SAMPLE03</p>
</div>
div {
text-align:center;
}
.sample01 {
position:relative;
z-index:1;
padding:10px;
width:250px;
text-align:center;
background:linear-gradient(to right, #db6448, #c32d91,#f1ae59);
margin:2rem auto 4rem;
}
.sample01:before {
content:"";
position:absolute;
top:0;
left:0;
z-index:-1;
box-sizing:border-box;
padding:2px;
width:100%;
height:100%;
background:#fff;
background-clip:content-box;
}
.sample02 p {
position:relative;
z-index:1;
padding:10px;
text-align:center;
background:linear-gradient(to right, #14cff3, #4460FF);
margin:2rem auto 4rem;
display: inline-block;
}
.sample02 p:before {
content:"";
position:absolute;
top:0;
left:0;
z-index:-1;
box-sizing:border-box;
padding:0 0 2px;
width:100%;
height:100%;
background:#fff;
background-clip:content-box;
}
.sample03 p {
position:relative;
z-index:1;
padding:10px 10px 10px 20px;
text-align:center;
background:linear-gradient(to top, #FFCB9C, #fe859c);
margin:2rem auto 4rem;
display: inline-block;
}
.sample03 p:before {
content:"";
position:absolute;
top:0;
left:0;
z-index:-1;
box-sizing:border-box;
padding:0 0 0 6px;
width:100%;
height:100%;
background:#fff;
background-clip:content-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.