Soft Line Gradients

#root {
  width: 500px;
  height: 500px;
  background:
    repeating-linear-gradient(-23deg, transparent 0%, rgb(255 255 255 / 0.22) 1.3%, transparent 2.7%, transparent 2.7%) 0 0 / 500px 500px no-repeat, /* Thin lines */
    repeating-linear-gradient(-71deg, transparent 0%, rgb(255 255 255 / 0.17) 6.88%, transparent 14.29%, transparent 14.29%) 0 0 / 500px 500px no-repeat, /* Thick lines */
    linear-gradient(344deg, transparent 25%, rgb(49 225 247) 44.49%, rgb(255 119 119) 62.87%, transparent 77.21%) 0 0 / 500px 500px no-repeat, /* Color gradient 1 */
    linear-gradient(21deg, transparent 61.4%, rgb(38 3 3) 100%) 0 0 / 500px 500px no-repeat, /* Color gradient 2 */
    linear-gradient(314deg, rgb(88 37 183) 6.99%, rgb(61 170 245) 28.68%, transparent 51.1%) 0 0 / 500px 500px no-repeat, /* Color gradient 3 */
    linear-gradient(27deg, rgb(18 14 68) 50.74%, transparent 100%) 0 0 / 500px 500px no-repeat; /* Color gradient 4 */
}

Forked from

Colors

Views

Code size

Layers

Explore

Community

Social