Home › Explore › Lovables

Lovables

Lovables is a shared gradient by @Surya Anand on ProGradients.

Lovables gradient

0 remixes · by @Surya Anand

CSS

.gradient-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at 52% 100%, #F16518 0%, #F16518 12.5%, #F17466 25%, #F17466 37.5%, #8FA9E9 50%, #C9DBF2 62.5%, #C9DBF2 75%, #ffffff 87.5%, #ffffff 100%),
    #000000;
  opacity: 1;
  mix-blend-mode: normal;
}

.gradient-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.53;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%224%22 stitchTiles=%22stitch%22/></filter><rect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/></svg>');
}

What is the Lovables gradient?

Lovables is a shared gradient by @Surya Anand on ProGradients.

How to use Lovables

Remix this design in the studio, or copy the CSS on this page. 4K and SVG stay on Pro.

Related templates

Related designs

Updated October 2026