Комбинация нескольких градиентов

Комбинируя несколько градиентов с разными параметрами, можно создать интересные узоры.

Исходный код этого примера:

<style>
    .pattern {
        width: 600px;
        height: 200px;
        background: radial-gradient(40px, rgba(255, 255, 255, 0) 80%, #7ac 80%, #7ac 99%, rgba(255, 255, 255, 0)) 0 0,
        radial-gradient(40px, rgba(255, 255, 255, 0) 80%, #7ac 80%, #7ac 99%, rgba(255, 255, 255, 0)) 40px 40px,
        radial-gradient(47px, rgba(255, 255, 255, 0) 50%, #bdf 50%, #bdf 75%, #bdf 99%, rgba(255, 255, 255, 0)) 40px 40px,
        radial-gradient(47px, rgba(255, 255, 255, 0) 50%, #bdf 50%, #def 75%, #bdf 99%, rgba(255, 255, 255, 0)) 0 0,
        #def;
        background-size: 80px 80px;
    }
</style>
<div class="pattern"></div>