Lorem Ipsum

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique ut metus vitae semper. Suspendisse sed elementum risus. Integer semper imperdiet metus a iaculis. Quisque venenatis fermentum condimentum. Suspendisse convallis et diam id semper. Etiam semper, purus non aliquam maximus, leo elit maximus arcu, ac semper mauris lectus a risus. Nulla at eros sit amet diam viverra vehicula non quis sem. Nam lacus libero, auctor eu lectus id, volutpat blandit felis. Ut sollicitudin in velit sed tristique. Nullam vel euismod nisl, non mollis ipsum.

Nullam sit amet sapien ornare, eleifend ipsum non, euismod ex. Nam rutrum nisl mollis tortor sagittis rhoncus. Duis quis ultricies quam, nec mattis urna. Donec convallis varius erat ut sagittis. Donec sed ex mollis ante elementum consequat. Proin in est tempus, volutpat nunc id, placerat magna. Nam a cursus libero. Donec vehicula laoreet sodales. Nam rutrum volutpat varius. Sed hendrerit hendrerit erat nec blandit. Morbi blandit at enim a ultricies.

OK, that's enough for the sample text Lorem Ipsum. Put any texts or elements above the fbgdbg div (or behind but it will make it hard to read--not gonna stop you though).

Static (non-animated) version

Take a look at the lines that are responsible for the background.

<div class="fbgdbg">
    <div class="blue-gradient"></div>
    <div class="green-gradient"></div>
    <div class="yellow-gradient"></div>
    <div class="red-gradient"></div>
    <div class="blue-gradient-bottom"></div>
    <div class="purple-gradient"></div>
</div>

In the fbgdbg class, the position property needs to be set to fixed to avoid overflowing. You can freely change the opacity property to any value you like, or remove it to let the background be shown fully--but make sure the text contrast ratio is sufficient, otherwise it will become hard to read.

Except for the yellow gradient div, every color's property value is left intact. However, the background color is used with the var() function to make the code easier to read.

The yellow gradient's bottom property value is divided by 2 from the original value to have the subtle yellow color (the lower the value, the more it can be seen). Since position is set to fixed you cannot see it. While absolute can see it, there are some side effects, notably the webpage becomes "overflowed".

Animated version

While the code for the animated background version is implemented in FB Accounts Center, it seems to be unused (due to missing the animation-duration property). If you want the background to gradually change color, here is the code:

<div class="fbgdbg">
    <div class="blue-gradient"></div>
    <div class="green-gradient green-gradient-animation"></div>
    <div class="yellow-gradient"></div>
    <div class="red-gradient"></div>
    <div class="blue-gradient-bottom blue-gradient-bottom-animation"></div>
    <div class="purple-gradient purple-gradient-animation"></div>
</div>

Feel free to experiment different animations that suit your style.