background-image, -webkit-mask-image

Значение -webkit-linear-gradient — задает элементу в качестве фонового изображения линейный градиент

Поддерживается браузерами Safari 5 и выше, Chrome

Пример

CSS
div {
background-image:-webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}

Значение -webkit-radial-gradient — задает элементу в качестве фонового изображения радиальный градиент

Поддерживается браузерами Safari 5 и выше, Chrome

Пример

CSS
div {
background-image:-webkit-radial-gradient(center 60deg, circle closest-corner, green 0%, yellow 100%)

Значение -webkit-repeating-linear-gradient — задает элементу в качестве фонового изображения линейный градиент, повторяющийся до бесконечности в обе стороны пропорционально указанным цветам и координатам ключевых точек.

Поддерживается браузерами Safari 5 и выше, Chrome

Пример

CSS
div {
background-image:-webkit-repeating-linear-gradient(top left -35deg, green, green 10px, yellow 10px, yellow 20px)

Значение -webkit-repeating-radial-gradient — задает элементу в качестве фонового изображения радиальный градиент, повторяющийся до бесконечности в обе стороны пропорционально указанным цветам и координатам ключевых точек.

Поддерживается браузерами Safari 5 и выше, Chrome

Пример

CSS
div {
background-image:-webkit-repeating-radial-gradient(top right, circle, red, green 30px, red 20%)

По теме