Soft Line Gradients

Designed by
Yoav Kadosh

Keywords:

Colors:

Layers
6
Views
133
Open in Editor

Layers

Thin lines
(linear)
Thick lines
(linear)
Color gradient 1
(linear)
Color gradient 2
(linear)
Color gradient 3
(linear)
Color gradient 4
(linear)

CSS

width: 500px;
height: 500px;
background:
repeating-linear-gradient(-23deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 1.3%, rgba(69,168,255,0) 2.7%, rgba(69,168,255,0) 2.7%) 0px 0px / 500px 500px no-repeat no-repeat, /* Thin lines */
repeating-linear-gradient(-71deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.17) 6.88%, rgba(69,168,255,0) 14.29%, rgba(69,168,255,0) 14.29%) 0px 0px / 500px 500px no-repeat no-repeat, /* Thick lines */
linear-gradient(344deg, rgba(255,255,255,0) 25%, rgba(238,64,64,1) 44.49%, rgba(237,155,64,1) 62.87%, rgba(69,168,255,0) 77.21%) 0px 0px / 500px 500px no-repeat no-repeat, /* Color gradient 1 */
linear-gradient(21deg, rgba(255,255,255,0) 61.4%, rgba(38,3,3,1) 100%) 0px 0px / 500px 500px no-repeat no-repeat, /* Color gradient 2 */
linear-gradient(314deg, rgba(88,37,183,1) 6.99%, rgba(61,170,245,1) 28.68%, rgba(69,168,255,0) 51.1%) 0px 0px / 500px 500px no-repeat no-repeat, /* Color gradient 3 */
linear-gradient(27deg, rgba(69,255,144,1) 50.74%, rgba(69,168,255,0) 100%) 0px 0px / 500px 500px no-repeat no-repeat; /* Color gradient 4 */