--- title: CSS3 Gradients localeTitle: Градиенты CSS3 --- ## Градиенты CSS3 Градиенты CSS3 позволяют отображать плавные переходы между двумя или более указанными цветами. Раньше вам приходилось использовать изображения для этих эффектов. Однако, используя градиенты CSS3, вы можете сократить время загрузки и использование полосы пропускания. Кроме того, элементы с градиентами выглядят лучше при увеличении, потому что градиент генерируется браузером. CSS3 определяет два типа градиентов: * Линейные градиенты (идет вниз / вверх / влево / вправо / по диагонали) * Радиальные градиенты (определяемые их центром) ### Линейные градиенты CSS3 Чтобы создать линейный градиент, вы должны определить не менее двух цветовых остановок. Цветные остановки - это цвета, которые вы хотите сделать плавными переходами. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента. #### Синтаксис ``` background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` ##### Линейный градиент - сверху вниз (по умолчанию) В следующем примере показан линейный градиент, который начинается сверху. Он начинает красный, переход на желтый: ![по умолчанию-линейный градиент-](https://i.imgur.com/2uGfleD.jpg) #### пример ```

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![по умолчанию-линейный градиент-](https://i.imgur.com/CvtXCMd.jpg) ##### Линейный градиент - слева направо В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переход на желтый: ![слева направо](https://i.imgur.com/e4dRvZR.jpg) #### пример ```

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![слева направо](https://i.imgur.com/k4FSyXz.jpg) #### Линейный градиент - диагональ Вы можете сделать градиент по диагонали, указав горизонтальные и вертикальные стартовые позиции. В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет вправо справа). Он начинает красный, переход на желтый: ![диагональ](https://i.imgur.com/YvtbUBH.jpg) #### пример ```

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

``` ![диагонально-ехр](https://i.imgur.com/8gKRhAp.jpg) #### Дополнительная информация: [Документация MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) || [w3schools](https://www.w3schools.com/css/css3_gradients.asp)