<div class="gradient"></div>
<div class="gradient new"></div>
<div class="border-image"></div>
<div class="mask"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22vw, 1fr));
  grid-gap: 1vw;
  padding: 1vw;
}

div {
  height: 50vh;
  color: #000;
  position: relative;
  
  &::before {
    content: attr(class);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 600 1.5em/ 1.375 segoe script, comic sans ms, cursive;
	  text-shadow: 1px 1px #000;
    white-space: nowrap;
  }
  
  &[class="gradient"] {
    background: darken(#f36, 25%);
    margin: 8px;
 
    &::after {
      content: "";
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      z-index: -1;
      background-image: radial-gradient(transparent 0px, transparent 4px, darken(#f36, 25%) 4px, darken(#f36, 25%));
    background-size: 15px 15px;
    background-position: -7.5px -7.5px;
    }
  }
  
  &[class="gradient new"] {
    background: #3396f5;
    color: #fff;
    position: relative;
    height: 100%;
    
    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%);
      background-size: 20px 20px;
      transform: none;
    }
    
    &::before {
      top: 5px;
      text-align: center;
      background-repeat: repeat-y;
      background-position: -10px 0%, calc(100% + 10px) 0;
    }
    
    &::after {
      content: '';
      left: 5px;
      background-repeat: repeat-x;
      background-position: 0 -10px, 0 calc(100% + 10px);
    }
  }
  
  &[class="border-image"]{
    color: #fff;
    background: #f65;
    height: 100%;
    border-width: 1rem;
    border-style: solid;
    border-image-source: url(//www.w3cplus.com/sites/default/files/blogs/2019/1904/border.svg?id=2);
    border-image-slice: 5;
    border-image-repeat: round;
    border-image-width: 2.5;
    border-image-outset: 1.25;
  }
  
  &[class="mask"]{
    background: #f3690f;
    color: #fff;
    height: 100%;
    -webkit-mask-box-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg) 30 round;
    mask-border: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg) 30 round;
  }
}