background paterns in css/scss using linear-gradient/radial-gradient

Question

playing around with this patterns just out of curiosity, is it possible to make something similar to posted images without adding more element to dom?

wave pattern zig zag pattern

my shoots at this, not even close, but ...

wave pattern

BODY {
   background: radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 21px,
                  #fcf2d7 21px,
                  #fcf2d7 28px,
                  rgba(255, 255, 255, 0) 28px
                )
                0 0,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 21px,
                  #fcf2d7 21px,
                  #fcf2d7 28px,
                  rgba(255, 255, 255, 0) 28px
                )
                48px 0,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #fdc536 19px,
                  #fdc536 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 24px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #fdc536 19px,
                  #fdc536 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 24px,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #e65848 19px,
                  #e65848 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 49px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #e65848 19px,
                  #e65848 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 49px,
              radial-gradient(
                  circle at top,
                  rgba(255, 255, 255, 0) 19px,
                  #2ab69d 19px,
                  #2ab69d 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                0 74px,
              radial-gradient(
                  circle at bottom,
                  rgba(255, 255, 255, 0) 19px,
                  #2ab69d 19px,
                  #2ab69d 27px,
                  rgba(255, 255, 255, 0) 27px
                )
                48px 74px;
            background-size: 98px 98px;
            background-color: #343844;
            background-repeat: repeat;
  }

https://codepen.io/ZeljkoVeseljko/pen/eYNRWqz

zig zag pattern

body {
            content: '';
            z-index: -1;
            background: linear-gradient(135deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(225deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(315deg, green 32%, rgba(0, 0, 0, 0) 32%),
              linear-gradient(45deg, green 32%, rgba(0, 0, 0, 0) 32%), darkgreen;
            background-position: -50px 0, -50px 0, 0 0, 0 0;
            background-size: 100px 100px;
}

https://codepen.io/ZeljkoVeseljko/pen/GRJmdjj

user_8620333 · Answer

I would do the zig-zag pattern with a simple SVG as background:

body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: 
   url("data:image/svg+xml;utf8,") 0 0,
   url("data:image/svg+xml;utf8,") 0 50px
   green;
  background-size:160px 100px;
}

Here is a good online tool if you want to edit the SVG: https://jxnblk.github.io/paths/?d=M0 48 L0 64 L32 16 L64 64 L64 48 L32 0 Z

Simply add the the value of the path in the link, edit it then download the SVG and replace it in the code.

In case you only want to use gradient here is an idea with mask:

body::before,
body::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:darkgreen;
  -webkit-mask: 
    linear-gradient(135deg, transparent 32%, white 32%), 
    linear-gradient(315deg, transparent 32%, white 32%), 
    linear-gradient(225deg, transparent 32%, white 32%), 
    linear-gradient(45deg,  transparent 32%, white 32%);
  -webkit-mask-position: -80px 0, 0 0;
  -webkit-mask-size: 160px 140px;
  -webkit-mask-composite: source-in;
  mask: 
    linear-gradient(135deg, transparent 32%, white 32%), 
    linear-gradient(315deg, transparent 32%, white 32%), 
    linear-gradient(225deg, transparent 32%, white 32%), 
    linear-gradient(45deg,  transparent 32%, white 32%);
  mask-position: -80px 0, 0 0;
  mask-size: 160px 140px;
  mask-composite: intersect;
}
body::after {
  transform:translateY(70px);
  top:-140px;
}


body {
  background:green;
}

For the wavy one you can check this link: How can I create a wavy shape CSS?

Example:

body::before {
  --t:22px;   /* Thickness */
  --h:50px;  /* Height (vertical distance between two curve) */
  --w:180px; /* Width  */
  --p:26.8px;  /* adjust this to correct the position when changing the other values*/
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, #004254 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, #004254 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    grey;
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(var(--h)/2),0px calc(var(--h)/2);
  
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

user_5526624 · Answer

OK, this took waaay too much time (2 hours?), but I wanted to play around with gradients to learn. It's not a perfect solution, because it's hard to edit, so I would actually use an SVG myself.

You can change background size to whatever to change the size of the pattern. The hard part was that the pattern wasn't a square and the lines weren't 90 degrees. The image that you showed had a 270x125px pattern.

The "transparent" part is pretty important, as the top linear-gradients are painting over the bottom gradients.

body {
    --right-side: 226deg;
    --left-side: 134deg;
    
    --fourthline: 5%;
    --thirdline: 20%;
    --secondline: 36%;
    --firstline: 51%;
    
    --background-height: 270px;
    --background-size-ratio: 2.16;
    
    background:
      linear-gradient(var(--right-side),
        darkgreen var(--fourthline), green var(--fourthline),
        green var(--thirdline),      darkgreen var(--thirdline),
        darkgreen var(--secondline), transparent var(--secondline)),

      linear-gradient(var(--left-side), 
        darkgreen var(--fourthline), green var(--fourthline),
        green var(--thirdline),      darkgreen var(--thirdline),
        darkgreen var(--secondline), green var(--secondline),
        green var(--firstline),      transparent var(--firstline)),

      linear-gradient(var(--right-side),
        green var(--firstline), transparent var(--firstline)),

      darkgreen;
        
    background-size: /* 270px x 125 px */
      var(--background-height)
      calc(var(--background-height) / var(--background-size-ratio));
}

background paterns in css/scss using linear-gradient/radial-gradient

2 Answers