Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Линейный градиент

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

Диагональный градиент

Стоп позиция

Радиальный градиент

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет.

Радиальный градиент до ближних сторон

Радиальный градиент до дальних сторон

Прозрачность цвета

Несколько цветов

Повторяющийся градиент

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.