CSS Multi-color, Diagonal Linear Gradient – A CSS Demo

Full page, multi-color, diagonal, linear gradient that includes coverage percentage

Look at the source code for this page to see the embedded CSS code used to provide the following.

This demo file includes:

• A CSS linear gradient.
• It contains four colors.
• The gradient covers the entire page regardless of viewport size.
• When the viewport size changes, the gradient also changes dynamically and proportionately - maintaining the defined color settings relative to the size of the viewing area.
• The gradient is on a diagonal from upper left to bottom right.
• The center of the red is 60% of the distance of the overall gradient.

For further info: Using CSS gradients (provided by the Mozilla Developer Network)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem harum dolore suscipit amet in repudiandae tenetur unde quae cum quod, cumque. Officia, molestias?

Neque accusamus nisi maxime hic dolore, dolorem, labore quis optio officiis. Dolores, laborum amet similique nesciunt minima expedita placeat iure et saepe, dicta.

Quod sunt quas, quidem, veritatis atque earum distinctio eligendi odit ab consequatur fugit natus autem dolorem dolores qui cumque sint iusto voluptatum recusandae.