/* Linear gradient pattern */ .repeat { background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); } /* Radial gradient pattern */ .repeat { background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter