<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.