Search code examples
cssbackground

Creating an isometric CSS grid as my section background

I want to create a subtle Isometric CSS grid as a background for my hero section. Something similar to this: https://image.shutterstock.com/image-vector/isometric-grid-black-template-your-260nw-1546251851.jpg but without the vertical lines running through the grid. Would anyone know how I'd do this?

Solution

  • using background-image we can achive a background grid using css.

    body{
    background-color: #fff;
    background: repeating-linear-gradient(
150deg
, #ccc, #bbb 2px, transparent 1px, transparent 40px) , repeating-linear-gradient(
30deg
, #ccc, #BBB 1px, transparent 2px, transparent 40px);
    background-size: 81px 46px;
}
    <body></body>