Онлайн-инструмент CSS Gradient Tool
CSS Gradient - это приятный маленький веб-сайт и бесплатный инструмент, который позволяет создавать градиентный фон для веб-сайтов.
Градиенты CSS позволяют отображать плавные переходы между двумя или более указанными цветами.
CSS определяет два типа градиентов:
- Линейные градиенты (идет вниз / вверх / влево / вправо / по диагонали)
- Радиальные градиенты (определяемые их центром)
Линейные градиенты CSS
Чтобы создать линейный градиент, вы должны определить как минимум две точки цвета. Цветовые точки - это цвета, между которыми вы хотите создать плавные переходы. Вы также можете установить начальную точку и направление (или угол) вместе с эффектом градиента.
Синтаксис
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
