Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <style>
- #grad1 {
- height: 200px;
- background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
- background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
- background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
- background: linear-gradient(red, blue); /* Standard syntax (must be last) */
- }
- #grad2 {
- height: 150px;
- width: 200px;
- background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */
- background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */
- background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
- background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
- }
- #grad3 {
- height: 150px;
- width: 200px;
- background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */
- background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */
- background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
- background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
- }
- </style>
- </head>
- <body>
- <h3>Linear Gradient - Top to Bottom</h3>
- <p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>
- <div id="grad1"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- <br><br>
- <h3>Repeating Radial Gradient</h3>
- <div id="grad2"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- <br><br>
- <h3>Repeating Radial Gradient</h3>
- <div id="grad3"></div>
- <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement