Backgrounds
A collection of example backgrounds, showing gradients (linear & radial) background images and elements and images that have been absolutely positioned.
Gradient #1
Linear Gradient, Red to yellow, top to bottom.
Gradient #2
Lineaer Gradient, Grey to #eaeaea, top to bottom.
Gradient #3
Linear Gradient, #ECE9E6 to #FDFDFD, left to right.
Gradient #4
Linear Gradient, #E0EAFC , #CFDEF3, right to left.
Gradient #5
Gradient #6
Gradient #7
Pattern Layout #1
Pattern Layout #2
Pattern Layout #3
Pattern Layout #4
Repeating linear gradient command
Pattern Layout #5
Straight Lines
Pattern Layout #6
Straight Lines
Down chevron
This is a display flexbox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla malesuada dui maximus blandit. Donec consectetur dignissim maximus. Pellentesque aliquam dapibus ullamcorper. Maecenas iaculis, nibh id rutrum auctor, felis ligula feugiat odio, in ultrices magna arcu consectetur mi. Nulla euismod enim in mi interdum, sit amet dictum mi posuere. Sed vitae elit varius nisi posuere egestas a non velit. In ultricies scelerisque risus vitae interdum. Sed lacinia ipsum sed sapien vulputate placerat. Pellentesque a tincidunt felis. Nunc placerat ullamcorper nisl, ut rhoncus massa tristique ac.
Background Image #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla malesuada dui maximus blandit. Donec consectetur dignissim maximus. Pellentesque aliquam dapibus ullamcorper. Maecenas iaculis, nibh id rutrum auctor, felis ligula feugiat odio, in ultrices magna arcu consectetur mi. Nulla euismod enim in mi interdum, sit amet dictum mi posuere. Sed vitae elit varius nisi posuere egestas a non velit. In ultricies scelerisque risus vitae interdum. Sed lacinia ipsum sed sapien vulputate placerat. Pellentesque a tincidunt felis. Nunc placerat ullamcorper nisl, ut rhoncus massa tristique ac.
Integer hendrerit enim sit amet tempor accumsan. Nullam vulputate risus at lectus semper vehicula. Quisque aliquam venenatis dolor sit amet egestas. Maecenas feugiat eget diam pulvinar pellentesque. Curabitur faucibus vehicula dolor ac tempor. Maecenas facilisis sollicitudin sapien, a faucibus nisl tempor eget. Aliquam quis enim nec neque interdum porta sit amet consectetur leo. Duis ligula elit, porttitor vel sapien et, gravida vehicula urna. Vestibulum a iaculis nulla, et hendrerit urna. Etiam scelerisque arcu ex, ac commodo elit condimentum vitae. Mauris luctus justo lacus, a porttitor odio elementum vitae. Integer vel ipsum vitae tellus convallis auctor. Aliquam lobortis ligula et posuere euismod. Fusce aliquet feugiat venenatis. Suspendisse et lectus a est molestie lacinia.
Background 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla malesuada dui maximus blandit. Donec consectetur dignissim maximus. Pellentesque aliquam dapibus ullamcorper. Maecenas iaculis, nibh id rutrum auctor, felis ligula feugiat odio.