Background pattern

Background pattern with css

It’s incredible what CSS can do these days and we have a fun pure-CSS background pattern demo for you. This example is a bit more advanced with CSS variables and multiple radial-gradients but they’re easy to master with a little practice.

If you experiment with this code, we recommend playing with the size and color variables first as those will quickly give you new varied patterns.

<div class="container html-bg">
</div>

<!-- Normally the css pattern would be added to the html tag -->

<style>

.container {
    width: 600px;
    height: 500px;
    overflow: hidden;
}
.html-bg {
    width: 100%;
    --size: 20px;
    --color1: rgb(249, 249, 249);
    --color2: rgba(248, 248, 248, 0.5);
    --gradient: #0000, #0004 5%,
        var(--color2) 6% 14%, var(--color1) 16% 24%, var(--color2) 26% 34%, var(--color1) 36% 44%,
        var(--color2) 46% 54%, var(--color1) 56% 64%, var(--color2) 66% 74%, var(--color1) 76% 84%,
        var(--color2) 86% 94%, #0004 95%, #0000;
    background: 
        radial-gradient(100% 50% at 100%    0 ,var(--gradient)),
        radial-gradient(100% 50% at 0     50% ,var(--gradient)),
        radial-gradient(100% 50% at 100% 100% ,var(--gradient));

    background-size:  var(--size) calc(2*var(--size));
}

</style>

A source of patterns https://css-pattern.com/

And another one https://heropatterns.com/

<div class="container2 html-bg2">
</div>

<!-- Normally the css pattern would be added to the html tag -->

<style>
    .container2 {
    width: 600px;
    height: 500px;
    overflow: hidden;
}
   .html-bg2 {
     --s: 100px; /* control the size */
     --c1: #1d1d1d;
     --c2: #4e4f51;
     --c3: #3c3c3c;
  
     background:
      repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) 
      calc(.5*var(--s)) calc(.5*var(--s)*0.577),
      repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
    background-size: var(--s) calc(var(--s)*0.577);
   }
</style>