Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / gradients / simple-gradients.html
blob255e0dcf02c442df774d315f079893b9d0464aac
1 <head>
2 <style>
3 .radial { width:150px; height:150px; border:2px solid black;
4 background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
5 -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
6 -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
7 -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); }
8 .linear { width:130px; height:130px; border:2px solid black; padding: 10px;
9 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
10 -webkit-background-origin: padding-box; -webkit-background-clip: content-box; }
11 </style>
12 </head>
13 <body>
14 <h1>Radial Gradient Example</h1>
15 <div class="radial"></div>
16 <h1>Linear Gradient Example</h1>
17 <div class="linear"></div>