05-30-repeating-gradients.html 1.0 KB

123456789101112131415161718192021222324252627282930313233
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Repeating gradients</title>
  6. <style>
  7. div {
  8. display: inline-block;
  9. margin-right: 1em;
  10. max-width: 600px;
  11. width: 100%;
  12. height: 300px;
  13. }
  14. .linear-repeat {
  15. background-image: -webkit-repeating-linear-gradient(#cfdfee, #2c56a1 20px);
  16. background-image: -moz-repeating-linear-gradient(#cfdfee, #2c56a1 20px);
  17. background-image: -o-repeating-linear-gradient(#cfdfee, #2c56a1 20px);
  18. background-image: repeating-linear-gradient(#cfdfee, #2c56a1 20px);
  19. }
  20. .radial-repeat {
  21. background-image: -webkit-repeating-radial-gradient(#cfdfee, #2c56a1 20px);
  22. background-image: -moz-repeating-radial-gradient(#cfdfee, #2c56a1 20px);
  23. background-image: -o-repeating-radial-gradient(#cfdfee, #2c56a1 20px);
  24. background-image: repeating-radial-gradient(#cfdfee, #2c56a1 20px);
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="linear-repeat"></div>
  30. <div class="radial-repeat"></div>
  31. </body>
  32. </html>