tiled-radial-gradients.html (1049B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Two Ellipses with Custom Placement (with gradients)</title> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size"> 7 <meta name="assert" content="Gradients are correctly repeated."> 8 <link rel="match" href="tiled-radial-gradients-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-8009"> 10 <style> 11 body { 12 margin: 0px; 13 } 14 #gradient { 15 position: absolute; 16 width: 600px; 17 height: 200px; 18 left: 0px; 19 margin: 0px; 20 background-color: aquamarine; 21 background-image: radial-gradient(closest-side, red 40%, transparent 40%); 22 background-size: 300px 200px; 23 background-position: 80px 0px; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="gradient"></div> 29 </body> 30 </html>