How to do a "true" carbon fiber CSS background

Question

True carbon fiber is a series of interlocking grey fibers they look like grey colored woven sheets. Does anyone know how to create such a pattern in CSS please?

The examples by Lea Verou are not true carbon fiber, hopefully you know what "true" carbon fiber looks like!

Ultimately I am wanting to achieve something similar to this background here.

By having further gradients superimposed of the carbon fiber background.

Answer 1

A gradient pattern similar to the one present in the linked website (they use an image as background) can be achieved using the same method as used by Lea Verou. By adding an extra linear-gradient image as the bottom-most layer and making it go from a darker shade of black to a lighter shade, we can get the same effect as in that website.

Note: That website also uses another layer on top to kind of blur out the ends but I think you are only looking for the interlocking pattern. This extra layer (if required) can also be added using CSS.

body {
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
}

---

If you need an exact replica of the effect in that website (where the gradient fades into a black color at both the left and right side) then add an extra layer on top of the existing gradients and make it go from black to transparent to black like in the below snippet.

body {
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
}