webkit-gradient-radial-1-ref.html (3114B)
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>CSS Reference</title> 9 <style> 10 div { 11 border: 1px solid black; 12 width: 40px; 13 height: 50px; 14 margin: 1px; 15 float: left; 16 } 17 br { clear: both; } 18 </style> 19 </head> 20 <body> 21 <!-- left top: --> 22 <div style="background: radial-gradient(circle 40px at left top, 23 blue, yellow)"></div> 24 <div style="background: radial-gradient(circle 40px at left top, 25 blue, pink 30%, yellow)"></div> 26 <!-- center top: --> 27 <div style="background: radial-gradient(circle 40px at center top, 28 blue, yellow)"></div> 29 <div style="background: radial-gradient(circle 40px at center top, 30 blue, pink 30%, yellow)"></div> 31 <!-- right top: --> 32 <div style="background: radial-gradient(circle 40px at right top, 33 blue, yellow)"></div> 34 <div style="background: radial-gradient(circle 40px at right top, 35 blue, pink 30%, yellow)"></div> 36 <br> 37 38 <!-- left center: --> 39 <div style="background: radial-gradient(circle 40px at left center, 40 blue, yellow)"></div> 41 <div style="background: radial-gradient(circle 40px at left center, 42 blue, pink 30%, yellow)"></div> 43 <!-- center center: --> 44 <div style="background: radial-gradient(circle 40px at center center, 45 blue, yellow)"></div> 46 <div style="background: radial-gradient(circle 40px at center center, 47 blue, pink 30%, yellow)"></div> 48 <!-- right center: --> 49 <div style="background: radial-gradient(circle 40px at right center, 50 blue, yellow)"></div> 51 <div style="background: radial-gradient(circle 40px at right center, 52 blue, pink 30%, yellow)"></div> 53 <br> 54 55 <!-- left bottom: --> 56 <div style="background: radial-gradient(circle 40px at left bottom, 57 blue, yellow)"></div> 58 <div style="background: radial-gradient(circle 40px at left bottom, 59 blue, pink 30%, yellow)"></div> 60 <!-- center bottom: --> 61 <div style="background: radial-gradient(circle 40px at center bottom, 62 blue, yellow)"></div> 63 <div style="background: radial-gradient(circle 40px at center bottom, 64 blue, pink 30%, yellow)"></div> 65 <!-- right bottom: --> 66 <div style="background: radial-gradient(circle 40px at right bottom, 67 blue, yellow)"></div> 68 <div style="background: radial-gradient(circle 40px at right bottom, 69 blue, pink 30%, yellow)"></div> 70 </body> 71 </html>