CSS-градиенты — это особые фоновые изображения, и на них действуют все свойства для управления фонами: background-position, background-size, background-repeat.

В отличие от обычных изображений градиенты не имеют «собственного» размера, и их размер равен размеру элемента, в фоне которого они расположены. Конечно, такое поведение не подходит для построения орнаментов.

К счастью, мы можем задать размер для градиента с помощью свойства background-size. Например, так:

background-size: 100px 200px;

Такая запись задаст всем фоновым изображениям ширину 100px и высоту 200px.

Задав размер для градиентов в фоне, мы получим фрагмент орнамента, повторением которого сможем управлять с помощью background-repeat.

На этом шаге мы увеличим контейнер, затем зададим размер для фоновых градиентов и отключим повторение, чтобы увидеть один кусочек орнамента.