| <!DOCTYPE html> |
| <style> |
| .box { |
| display: inline-block; |
| height: 100px; |
| width: 200px; |
| border: 1px solid black; |
| } |
| |
| .linear1 { |
| background-image: linear-gradient(to right, red -80%, green -80%, green); |
| } |
| |
| .linear2 { |
| background-image: linear-gradient(to right, red, green 0%, green); |
| } |
| |
| .linear3 { |
| background-image: linear-gradient(to right, green, green 100%, red); |
| } |
| |
| .linear4 { |
| background-image: linear-gradient(to right, green, blue); |
| } |
| |
| .linear5 { |
| background-image: linear-gradient(to right, red, green, blue); |
| } |
| |
| .linear6 { |
| background-image: linear-gradient(to right, green, green 50%, blue 50%, blue); |
| } |
| |
| .radial1 { |
| background-image: radial-gradient(ellipse, red -80%, green -80%, green); |
| } |
| |
| .radial2 { |
| background-image: radial-gradient(ellipse, red, green 0%, green); |
| } |
| |
| .radial3 { |
| background-image: radial-gradient(ellipse, green, green 100%, red); |
| } |
| |
| .radial4 { |
| background-image: radial-gradient(ellipse, green, blue); |
| } |
| |
| .radial5 { |
| background-image: radial-gradient(ellipse, red, green, blue); |
| } |
| |
| .radial6 { |
| background-image: radial-gradient(ellipse, green, green 50%, red, blue 50%, blue); |
| } |
| </style> |
| |
| <div class="linear1 box"></div> |
| <div class="linear2 box"></div> |
| <div class="linear3 box"></div> |
| <div class="linear4 box"></div> |
| <div class="linear5 box"></div> |
| <div class="linear6 box"></div> |
| <div class="radial1 box"></div> |
| <div class="radial2 box"></div> |
| <div class="radial3 box"></div> |
| <div class="radial4 box"></div> |
| <div class="radial5 box"></div> |
| <div class="radial6 box"></div> |
