CSS — градиентный фон (линейный, радиальный, повторяющийся линейный)

Вот как можно сделать различные градиентные фоны с помощью CSS. Он работает во всех веб-браузерах (Chrome, Firefox, IE, Safari, Opera, iOS и Android).

Общий градиент — поместите этот код в таблицу стилей.

#фон {
/ * safari4 +, хром * /
background: -webkit-Gradient (линейный, слева внизу, справа вверху, остановка цвета (0%, rgba (255,48,0,1)), остановка цвета (100%, rgba (255,144,0,1)) );

/ * safari5.1 +, chrome10 + * /
фон: -вебкит-линейный градиент (53deg, rgba (255,48,0,1) 0%, rgba (255,144,0,1) 100%);

/ * ff3.6 + * /
фон: -моз-линейный градиент (53deg, rgba (255,48,0,1) 0%, rgba (255,144,0,1) 100%);

/ * опера 11.10+ * /
фон: -o-линейный градиент (53deg, rgba (255,48,0,1) 0%, rgba (255,144,0,1) 100%);

/ * ie10 + * /
фон: -ms-линейный градиент (53deg, rgba (255,48,0,1) 0%, rgba (255,144,0,1) 100%);

/ * w3c * /
фон: линейный градиент (37 градусов, rgba (255,48,0,1) 0%, rgba (255,144,0,1) 100%);

/ * ie6-9 * /
фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# ff9000 ′, endColorstr =’ # ff3000 ′, GradientType = 0);
}

Повторяя-Линейно-Градиент

#specialbackground {
фон:
Повторяя-линейный градиент (
45deg,
#fff,
#fff 10px,
#eee 10px,
#eee 20px);
}

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

#specialbackground {
фон:
радиально-градиент (
#ffffff,
# 333333);
}