webkit-gradient-radial-2-ref.html (1808B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: -webkit-gradient(radial, ...) expressions 10 with various numeric positions and/or side keywords. 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 50px; 16 height: 40px; 17 margin: 1px; 18 float: left; 19 } 20 br { clear: both; } 21 </style> 22 </head> 23 <body> 24 <!-- Placing gradient's center outside of the element: --> 25 <div style="background: radial-gradient(circle 50px at -10px -20px, 26 blue, yellow)"></div> 27 <div style="background: radial-gradient(circle 50px at 15px -2px, 28 blue, yellow)"></div> 29 <div style="background: radial-gradient(circle 50px at -10px 55px, 30 blue, yellow)"></div> 31 <br> 32 33 <!-- Mixing side keywords with numeric values: --> 34 <div style="background: radial-gradient(circle 50px at left 5px, 35 blue, yellow)"></div> 36 <div style="background: radial-gradient(circle 50px at center 10px, 37 blue, yellow)"></div> 38 <div style="background: radial-gradient(circle 50px at right 30px, 39 blue, yellow)"></div> 40 <br> 41 42 <div style="background: radial-gradient(circle 50px at 5px top, 43 blue, yellow)"></div> 44 <div style="background: radial-gradient(circle 50px at 10px center, 45 blue, yellow)"></div> 46 <div style="background: radial-gradient(circle 50px at 30px bottom, 47 blue, yellow)"></div> 48 </body> 49 </html>