Css линия с градиентом

linear-gradient()

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of .

Try it

Syntax

/* A gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* A gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* Color hint: A gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); 

Values

The position of the gradient line’s starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side ( left or right ), and the other the vertical side ( top or bottom ). The order of the side keywords does not matter. If unspecified, it defaults to to bottom .

The values to top , to bottom , to left , and to right are equivalent to the angles 0deg , 180deg , 270deg , and 90deg , respectively. The other values are translated into an angle.

The gradient line’s angle of direction. A value of 0deg is equivalent to to top ; increasing values rotate clockwise from there.

An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Description

As with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

To create a linear gradient that repeats to fill its container, use the repeating-linear-gradient() function instead.

Because s belong to the data type, they can only be used where s can be used. For this reason, linear-gradient() won’t work on background-color and other properties that use the data type.

Composition of a linear gradient

A linear gradient is defined by an axis—the gradient line—and two or more color-stop points. Each point on the axis is a distinct color; to create a smooth gradient, the linear-gradient() function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

The starting point is the location on the gradient line where the first color begins. The ending point is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called magic corners: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

Customizing Gradients

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop’s position can be explicitly defined by using a or a . If you don’t specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); 

By default, colors transition smoothly from the color at one color-stop to the color at the subsequent color-stop, with the midpoint between the colors being the halfway point between the color transition. You can move this midpoint to any position between two color-stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however, the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

linear-gradient(red 10%, 30%, blue 90%); 

If two or more color-stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

Color-stops should be listed in ascending order. Subsequent color-stops of lower value will override the value of the previous color-stop creating a hard transition. The following changes from red to yellow at the 40% mark, and then transitions from yellow to blue over 25% of the gradient:

linear-gradient(red 40%, yellow 30%, blue 65%); 

Multi-position color-stops are allowed. A color can be declared as two adjacent color-stops by including both positions in the CSS declaration. The following three gradients are equivalent:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); 

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

Formal syntax

=
linear-gradient( [ | to ]? , )

=
[ left | right ] ||
[ top | bottom ]

=
, [ ? , ]#

=
&&
?

=

=
|

Examples

Gradient at a 45-degree angle

body  width: 100vw; height: 100vh; > 

body  background: linear-gradient(45deg, red, blue); > 

Gradient that starts at 60% of the gradient line

body  width: 100vw; height: 100vh; > 

body  background: linear-gradient(135deg, orange 60%, cyan); > 

Gradient with multi-position color-stops

This example uses multi-position color-stops, with adjacent colors having the same color-stop value, creating a striped effect.

body  width: 100vw; height: 100vh; > 

body  background: linear-gradient( to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% ); > 

More linear-gradient examples

Please see using CSS gradients for more examples.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Using CSS gradients
• Other gradient functions: repeating-linear-gradient() , radial-gradient() , repeating-radial-gradient() , conic-gradient() , repeating-conic-gradient()
• element()
• image()
• image-set()
• cross-fade()
• CSS images module
• New functions, gradients, and hues in CSS colors (Level 4) on MDN blog (2023)

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

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

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

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

linear — gradient ( )

Функция для создания фона в виде градиента или повторяющегося паттерна.

Время чтения: меньше 5 мин

1. Кратко
2. Пример
3. Как понять
4. Как пишется
   1. Количество цветов
   2. Точки остановки цвета
   3. Направление градиента
   4. Повторяющийся градиент
   5. Множественные градиенты
   1. Денис Ежков советует
   2. Алёна Батицкая советует

   Обновлено 20 декабря 2021

   Кратко

   Скопировать ссылку «Кратко» Скопировано

   Функция linear — gradient используется для задания фона в виде линейного градиента.

   Пример

   Скопировать ссылку «Пример» Скопировано

    .element  background-image: linear-gradient(#6e4aff, #49A16C);> .element  background-image: linear-gradient(#6e4aff, #49A16C); >    Скопировать Скопировано Не удалось скопировать   

   Как понять

   Скопировать ссылку «Как понять» Скопировано

   Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.

   Как пишется

   Скопировать ссылку «Как пишется» Скопировано

   Самый простой вид градиента — переход между двумя цветами:

    .element  background-image: linear-gradient(#2E9AFF, #F498AD);> .element  background-image: linear-gradient(#2E9AFF, #F498AD); >    Скопировать Скопировано Не удалось скопировать   

   

   Мы можем задавать направление градиента, используя ключевые слова с приставкой to : to left , to top , to right , to bottom (по умолчанию). Значения имеют следующие эквиваленты в углах:

   Ключевые слова можно сочетать, чтобы направить градиент в нужный угол элемента: to top left будет рисовать градиент из правого нижнего в левый верхний угол.

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

   Скопировать ссылку «Повторяющийся градиент» Скопировано

   Если градиент должен многократно повторяться, можно использовать функцию repeating — linear — gradient ( ) .

   Множественные градиенты

   Скопировать ссылку «Множественные градиенты» Скопировано

   Множественный фон элемента может применяться и к градиентам.

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   💡 Градиент можно анимировать! 🥳

   На практике

   Скопировать ссылку «На практике» Скопировано

   Денис Ежков советует

   Скопировать ссылку «Денис Ежков советует» Скопировано

   🛠 Используя возможность резких переходов между цветами, можно генерировать различные паттерны при помощи линейного градиента. Яркий пример — разлинованный под школьную тетрадь фон:

   Алёна Батицкая советует

   Скопировать ссылку «Алёна Батицкая советует» Скопировано

   🛠 Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово transparent отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный.

    .element  background: linear-gradient(#F498AD 10%, transparent);> .element  background: linear-gradient(#F498AD 10%, transparent); >    Скопировать Скопировано Не удалось скопировать   

   Линейный градиент в Chrome, красиво растворяется

   

   Ровно тот же самый градиент, но в Safari. Это вообще легально? 😐

   

   Решить этот баг можно довольно просто, хоть немного и больно. Нужно вместо ключевого слова transparent указать предыдущий цвет градиента, но с нулевой прозрачностью. Визуально итог будет тот же, и даже в Safari всё заработает.

    .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));> .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0)); >    Скопировать Скопировано Не удалось скопировать   

   🛠 Статьи и сборники классных паттернов, созданных при помощи градиентов:

   Источник