<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <head> <title>CSS Reference</title> <style> div { border: 1px solid black; width: 50px; height: 30px; margin: 1px; float: left; } br { clear: both; } </style> </head> <body> <!-- Start point and end point are the same, in testcase: We end up detecting that the start & end have the same "y" value, so we render a gradient going from left to right horizontally. --> <div style="background: linear-gradient(to right, blue, yellow)"></div> <div style="background: linear-gradient(to right, blue, yellow)"></div> <div style="background: linear-gradient(to right, blue, yellow)"></div> <br> <!-- For the rest of the gradients here, we end up rendering a "legacy" gradient (-moz-linear-gradient) with the gradient line starting at the testcase's specified "start" point, and we ignore the "end" point. --> <div style="background: -moz-linear-gradient(center center, blue, yellow)"></div> <div style="background: -moz-linear-gradient(left top, blue, yellow)"></div> <div style="background: -moz-linear-gradient(10px 15px, blue, yellow)"></div> <br> <div style="background: -moz-linear-gradient(-10px -15px, blue, yellow)"></div> <div style="background: -moz-linear-gradient(-100px 10px, blue, yellow)"></div> <div style="background: -moz-linear-gradient(10px -100px, blue, yellow)"></div> <br> <div style="background: -moz-linear-gradient(center top, blue, yellow)"></div> <div style="background: -moz-linear-gradient(left center, blue, yellow)"></div> <div style="background: -moz-linear-gradient(right center, blue, yellow)"></div> <br> <div style="background: -moz-linear-gradient(right top, blue, yellow)"></div> <div style="background: -moz-linear-gradient(left top, blue, yellow)"></div> <div style="background: -moz-linear-gradient(left bottom, blue, yellow)"></div> <br> </body> </html>