Search code examples
cssbackgroundcss-gradients

Make chainmail background theme


I'd like to make a chainmail like this:

chainmail background theme

I've tried using linear-gradient but it seems not to work

    background: linear-gradient(#0c0c0c, #222222)!important

I expect the output to be like on shown image from imgur. Will linear-gradient work?


Solution

  • You can do this with radial-gradient

    I used different colors so we can better see the result:

    body {
      margin:0;
      height:100vh;
      background:
        radial-gradient(50% 100%,#000 35%,transparent 50%) 0   0  /10px 10px,
        radial-gradient(50% 100%,#000 35%,transparent 50%) 5px 5px/10px 10px,
        yellow;
    }

    You can easily adjust the different values to control the size:

    body {
      margin:0;
      height:100vh;
      background:
        radial-gradient(50% 100%,#000 25%,transparent 50%) 0   0  /8px 8px,
        radial-gradient(50% 100%,#000 25%,transparent 50%) 4px 4px/8px 8px,
        yellow;
    }