| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| height: 100px; |
| } |
| #red { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.5 0.5 0.5), color(srgb 1 1 1)); |
| } |
| #green { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.5 0.5 0.5), color(srgb 1 1 1)); |
| } |
| #blue { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.5 0.5 0.5), color(srgb 1 1 1)); |
| } |
| #redAndGreen { |
| background: linear-gradient(to right in srgb, color(srgb 0 0.5 0), color(srgb 0.5 0.5 0.5), color(srgb 1 1 1)); |
| } |
| #multiple { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.25 0.25 0.25), |
| color(srgb 0.5 0.5 0.5), color(srgb 0.75 0.75 0.75), color(srgb 1 1 1)); |
| } |
| #noneOnLeft { |
| background: linear-gradient(to right in srgb, color(srgb 0.5 0 0), color(srgb 0.5 0.25 0.25), |
| color(srgb 0.5 0.5 0.5), color(srgb 0.75 0.75 0.75), color(srgb 1 1 1)); |
| } |
| #noneOnRight { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.25 0.25 0.25), |
| color(srgb 0.5 0.5 0.5), color(srgb 0.75 0.75 0.5), color(srgb 1 1 0.5)); |
| } |
| #allNone { |
| background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0 1 1)); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="red"></div> |
| <div id="green"></div> |
| <div id="blue"></div> |
| <div id="redAndGreen"></div> |
| <div id="multiple"></div> |
| <div id="noneOnLeft"></div> |
| <div id="noneOnRight"></div> |
| <div id="allNone"></div> |
| </body> |
| </html> |
