CodePen Embed - Shiny Border Gradients

<div class="grid-container">
  
    <div class="display-box wrapper">
      <h1 class="display-content">Enter<br>Text<br>Here</h1>
    </div>

    <div class="display-box gold-wrapper wrapper--rounded">
      <h1 class="display-content">Gold</h1>
    </div>
  
    <div class="display-box silver-wrapper">
      <h1 class="display-content">Silver</h1>
    </div>
  
    <div class="display-box bronze-wrapper">
      <h1 class="display-content">Bronze</h1>
    </div>
  
    <div class="display-box platinum-wrapper">
      <h1 class="display-content">Platinum</h1>
   </div>
  
    <div class="display-box pink-gold-wrapper">
      <h1 class="display-content">Pink<br>Gold</h1>
   </div>
  
    <div class="display-box white-gold-wrapper">
      <h1 class="display-content">White<br>Gold</h1>
   </div>
  
   <div class="display-box yellow-gold-wrapper">
      <h1 class="display-content">Yellow<br>Gold</h1>
   </div>
  
   <div class="display-box perl-wrapper">
      <h1 class="display-content">Perl</h1>
   </div>
  
   <div class="display-box china-wrapper">
      <h1 class="display-content">China</h1>
   </div>
  
   <div class="display-box woody-wrapper">
      <h1 class="display-content">Woody</h1>
   </div>
  
   <div class="display-box carbon-wrapper">
      <h1 class="display-content">Carbon</h1>
   </div>
  
  <div class="button button-carbon">
    CARBON
    <br>CARBON
    <br>CARBON
  </div>
  
   <div class="display-box megatron-wrapper">
      <h1 class="display-content">Mega</h1>
   </div>
  
   <div class="display-box witching-hour-wrapper">
      <h1 class="display-content">Witch<br>Hour</h1>
   </div>
  
   <div class="display-box ohhappiness-wrapper">
      <h1 class="display-content">Oh<br>Happy</h1>
   </div>
  
   <div class="display-box sunkist-wrapper">
      <h1 class="display-content">Sunkist</h1>
   </div>
  
   <div class="display-box ibiza-wrapper">
      <h1 class="display-content">Ibiza</h1>
   </div>
  
   <div class="display-box frost-wrapper">
      <h1 class="display-content">Frost</h1>
   </div>
  
   <div class="display-box politics-wrapper">
      <h1 class="display-content">Politics</h1>
   </div>
  
   <div class="display-box shahabi-wrapper">
      <h1 class="display-content">Shahabi</h1>
   </div>
  
   <div class="display-box forest-wrapper">
      <h1 class="display-content">Forest</h1>
   </div>
  
   <div class="display-box mv-wrapper">
      <h1 class="display-content">MV</h1>
   </div>
  
   <div class="display-box strain-wrapper">
      <h1 class="display-content">Strain</h1>
   </div>
  
   <div class="display-box daytripper-wrapper">
      <h1 class="display-content">Day<br>Tripper</h1>
   </div>
  
   <div class="display-box calmdarya-wrapper">
      <h1 class="display-content">Calm<br>Darya</h1>
   </div>
  
   <div class="display-box rbp-wrapper">
      <h1 class="display-content">RBP</h1>
   </div>
  
   <div class="display-box cherry-wrapper">
      <h1 class="display-content">Cherry</h1>
   </div>
  
</div>

/* 
Gradient credits:
sato4yoshida
https://uigradients.com/
*/

@import url('https://fonts.googleapis.com/css?family=Nova+Flat&display=swap');
@font-face {
  font-family: 'Nova Flat', cursive;
  src: url('https://fonts.googleapis.com/css?family=Nova+Flat&display=swap');
}

$gold-lng: linear-gradient(-72deg,#ffde45,#ffffff 16%,#ffde45 21%,#ffffff 24%,#452100 27%,#ffde45 36%,#ffffff 45%,#ffffff 60%,#ffde45 72%,#ffffff 80%,#ffde45 84%,#452100);

$silver-lng: linear-gradient(-72deg,#dedede,#ffffff 16%,#dedede 21%,#ffffff 24%,#454545 27%,#dedede 36%,#ffffff 45%,#ffffff 60%, #dedede 72%,#ffffff 80%,#dedede 84%,#a1a1a1);

$bronze-lng: linear-gradient(-72deg,#ca7345,#ffdeca 16%,#ca7345 21%, #ffdeca 24%,#a14521 27%,#ca7345 36%, #ffdeca 45%,#ffdeca 60%,#ca7345 72%,#ffdeca 80%,#ca7345 84%,#732100);

$plat-lng: linear-gradient(-72deg,#dedeff,#ffffff 16%,#dedeff 21%,#ffffff 24%,#555564 27%,#dedeff 36%,#ffffff 45%,#ffffff 60%,#dedeff 72%,#ffffff 80%,#dedeff 84%,#555564);

$pink-gold-lng: linear-gradient(-72deg,#ffdeca,#ffffff 16%,#ffdeca 21%,#ffffff 24%,#de7345 27%,#ffdeca 36%,#ffffff 45%,#ffffff 60%,#ffdeca 72%,#ffffff 80%,#ffdeca 84%,#de7345 );

$white-gold-lng: linear-gradient(-72deg,#ffdea1,#ffffff 16%,#ffdea1 21%, #ffffff 24%,#736445 27%,#ffdea1 36%,#ffffff 45%,#ffffff 60%,#ffdea1 72%,#ffffff 80%,#ffdea1 84%,#736445);

$yellow-gold-lng: linear-gradient(-72deg,#ffc373,#ffffff 16%,#ffc373 21%,#ffffff 24%,#a17434 27%,#ffc373 36%,#ffffff 45%,#ffffff 60%,#ffc373 72%,#ffffff 80%,#ffc373 84%, #a17434);

$perl-lng: linear-gradient(-72deg,#dedede,#ffffff 16%,#dedede 21%,#ffffff 24%,#caa1de 27%,#dea1ca 30%,#dedede 38%,#ffffff 45%,#ffffff 60%,#dedede 72%,#ffffff 80%,#dedede 84%,#caa1de 93%,#dea1ca);

$china-lng: linear-gradient(#ffffff,#e3e3e3);

$woody-lng: linear-gradient(#ca7321,#ffcaa1 15%,#dea173 20%,#a16421 15%,#ca7321 30%,#ffcaa1 35%,#ca7321 40%,#ffcaa1 50%,#a16421 55%,#ca7321 60%,#ffcaa1 65%,#ca7321 75%,#dea173 80%,#ffcaa1 90%,#dea173 80%,#ca7321);

$woody-lng-repeat: -webkit-repeating-linear-gradient(top, #ca7321 2px,#ffcaa1,#dea173,#a16421 2px,#ca7321 3px,#ffcaa1 4px,#ca7321 4px,#ffcaa1 5px,#a16421 5px,#ca7321 6px,#ffcaa1 6px,#ca7321 7px,#dea173 9px,#ffcaa1 9px,#dea173 9px,#ca7321 1px);

$carbon-lng: -webkit-repeating-linear-gradient(
    top, #565656, #131313 3px, #565656 3px);

$cp-black: #000;
$lg-border: 30px solid;
$md-border: 15px solid;
$sm-border: 7px solid;
$current-border: 5px solid;

body {
  background: $cp-black;
  padding-top: 2em;
}

.button {
  display: inline-block;
  text-align: center;
  letter-spacing: 0.2em;
  display: grid;
  align-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-gap: 2rem;
}

.display-box {
  padding: 0 2rem;
  place-self: stretch; //aligns and justifies center (shorthand)
  text-align: center;
  display: grid;
  align-content: center;
}

.display-content {
  font-family: 'Nova Flat', cursive;
  color: whitesmoke;
  font-weight: bold;
  font-size: 2rem;
}

.wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              linear-gradient(to right, red, purple);
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

//add this class to any wrapper div to see it with a rounded border. See the Gold for an example.
.wrapper--rounded {
  border-radius: 1rem;
  border-width: 10px;
  position: relative;
}

.wrapper--rounded::before { 
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  border: 6px solid $cp-black;
  border-radius: .8rem;
}

.gold-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $gold-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.silver-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $silver-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.bronze-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $bronze-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.platinum-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $plat-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.pink-gold-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $pink-gold-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.white-gold-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $white-gold-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.yellow-gold-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $yellow-gold-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.perl-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $perl-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.china-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $china-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.woody-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $woody-lng-repeat;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.carbon-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $carbon-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

.button-carbon {
  place-self: stretch; //aligns and justifies (shorthand)
  color: rgba(0, 0, 0, 0.5);
  font-family: 'Nova Flat', cursive;
  font-size: 2em;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    2px 2px 0.5em rgba(0, 0, 0, 0.55),
    inset 1px 1px 0 rgba(255, 255, 255, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5)
  ;
  background:
    -moz-repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
  );
  background:
    -o-repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
  );
  background:
    -webkit-repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
  );
  background:
    repeating-linear-gradient(
    top, #565656, #131313 2px, #565656 1px
  );
}

$megatron-lng: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);

.megatron-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $megatron-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$witching-hour-lng: linear-gradient(to right, #c31432, #240b36);

.witching-hour-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $witching-hour-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$ohhappiness-lng: linear-gradient(to right, #00b09b, #96c93d);

.ohhappiness-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $ohhappiness-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$sunkist-lng: linear-gradient(to right, #f2994a, #f2c94c);

.sunkist-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $sunkist-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$ibiza-lng: linear-gradient(to right, #ee0979, #ff6a00);

.ibiza-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $ibiza-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$frost-lng: linear-gradient(to right, #000428, #004e92);

.frost-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $frost-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$politics-lng: linear-gradient(to right, #2196f3, #f44336);

.politics-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $politics-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$shahabi-lng: linear-gradient(to right, #a80077, #66ff00);

.shahabi-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $shahabi-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$forest-lng: linear-gradient(to right, #5a3f37, #2c7744);

.forest-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $forest-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$mv-lng: linear-gradient(to right, #5614b0, #dbd65c);

.mv-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $mv-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$strain-lng: linear-gradient(to right, #870000, #190a05);

.strain-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $strain-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$daytripper-lng: linear-gradient(to right, #f857a6, #ff5858);

.daytripper-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $daytripper-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$calmdarya-lng: linear-gradient(to right, #5f2c82, #49a09d);

.calmdarya-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $calmdarya-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$rbp-lng: linear-gradient(to right, #bbd2c5, #536976, #292e49);

.rbp-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $rbp-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

$cherry-lng: linear-gradient(to right, #eb3349, #f45c43);

.cherry-wrapper {
  box-sizing: border-box;
  background: linear-gradient($cp-black, $cp-black), 
              $cherry-lng;
  border: $lg-border transparent;
  background-repeat: no-repeat;
  background-origin: padding-box, border-box;
}

View Compiled

This Pen is owned by Tihani on CodePen.

See more by @ElphC350 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.