Записка о linear-gradient background

Градиент в деталях с поддержкой IE:

background: rgb(2,0,36);
background: -moz-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(195,139,79,0.6110819327731092) 33%, rgba(0,212,255,1) 69%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);

Здесь у нас:

• 0deg — угол градиента (0 — сверху вниз, 90 — слева направо, промежуточные значения — направления);
• rgba(2,0,36,1) — цвет с прозрачностью 1 (можно менять от 0 до 1, 0 — прозрачный);
• 0%, 33%, 69% — точки перехода цветов;
• startColorstr=»#020024″,endColorstr=»#00d4ff» — значения для цветов старта и финиша на IE.

Также можно сделать радиальный градиент:

background: rgb(238,174,202);
background: -moz-radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
background: -webkit-radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeaeca",endColorstr="#94bbe9",GradientType=1);

Тут разница лишь в функции и вместо угла указывается circle.

Сайт-сервис для быстрой сборки нужного CSS-градиента:

https://cssgradient.io/