How to make lovable’s bg

1. basic svg tag

so lets make this svg step by step. first drop a naked svg element:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 200 2596 2600" fill="none" preserveAspectRatio="none slice"></svg>

what are all these props?

• xmlns - xml namespace so browser parses svg.
• width="100%" height="100%"- stretch to parent box.
• viewBox="0 200 2596 2600"- internal grid (min-x 0, min-y 200, w 2596, h 2600).
• fill="none" - default fill transparent.
• preserveAspectRatio="none slice"- ignore aspect ratio + slice to cover.

2. drop a box (<rect/>)

now we add a rectangle (blob seed):

<rect x="453" y="455" width="1690" height="1690" rx="710.009" fill="#4E93FF" opacity="0.65" />

• x/y - position in viewBox.
• width/height - size.
• rx - corner radius (if no ry it reuses rx).
• fill - color.
• opacity - transparency.

play with it below (sliders) ⬇

<rect x="453" y="455" width="1690" height="1690" rx="710.009" fill="#4E93FF" opacity="0.65" />

3. make it blurry (filters)

we want soft glow. svg has filters. the one we need: <feGaussianBlur/>.

We define filters inside <defs></defs> because anything in defs is not directly drawn; it only renders when some element references it (like using filter="url(#id)" on a rect). keeps markup clean and reusable.

<defs>
  <filter id="filter0_f" x="0.074" y="2.074" width="2595.85" height="2595.85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="140" />
  </filter>
</defs>

• id - name so we can do filter="url(#filter0_f)".
• x y width height - filter region (compute box). Make it larger than the shape so the blurred glow isn't clipped.
• filterUnits="userSpaceOnUse"- absolute svg units. alt: objectBoundingBox = 0→1 relative.
• color-interpolation-filters="sRGB"- color math in sRGB.
• stdDeviation="140" - blur strength.

4. play with numbers

tune blur / size / position live. generate code.

<rect x="1098" y="1300" width="400" height="400" rx="120" fill="#4E93FF" opacity="0.65" filter="url(#demo_filter)" />
<filter id="demo_filter" x="0.074" y="2.074" width="2595.85" height="2595.85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="140"/></filter>

ok now we know how to make a box and blur it. next we stack multiple boxes (each with its own blur + color) to get that lovable layered glow. we will add them one by one in the same order as the final effect.

5. multi layer glow

stack several rects each with its own filter + color. tweak / add / remove below.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 200 2596 2600" fill="none" preserveAspectRatio="none slice">
  <g filter="url(#f_l0)">
    <rect x="453" y="455" width="1690" height="1690" rx="710.009" fill="#4E93FF" opacity="0.65" />
  </g>
  <g filter="url(#f_l1)">
    <rect x="472" y="470.675" width="1653.6" height="1655.58" rx="710.009" fill="#639CF2" opacity="0.65" />
  </g>
  <g filter="url(#f_l2)">
    <rect x="580" y="582.866" width="1437.8" height="1439.21" rx="710.009" fill="#FF7EEA" opacity="0.65" />
  </g>
  <defs>
    <filter id="f_l0" x="-1237" y="-1235" width="5070" height="5070" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="140" /></filter>
    <filter id="f_l1" x="-1181.6" y="-1184.905" width="4960.799999999999" height="4966.74" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="60" /></filter>
    <filter id="f_l2" x="-857.8" y="-856.344" width="4313.4" height="4317.63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="58" /></filter>
  </defs>
</svg>

6. what are those <g filter=...> groups?

each layer sits inside a <g> with a filter so the blur applies only to that rectangle (or set of rectangles). quick decode:

• group 1 (filter0_f) - big base blue square (#4E93FF) heavy blur (140) = broad soft field.
• group 2 (filter1_f) - slightly smaller blue (#639CF2) lighter blur (60) adds subtle depth ring.
• group 3 (filter_common_f) - three stacked rects share ONE filter: pastel green (#D5FDB9), pale cyan (#E4F9FF), pink (#FF7EEA @ 0.65). sharing keeps their glows blending in the same blur field.
• group 4 (filter5_f) - red core (#F3001D) tighter size, blur 115 gives punchy hot center.
• group 5 (filter6_f) - orange layer (#F38300) stretched vertically, same 115 blur stretches warmth outward.

notice: filter regions (x/y/width/height) are larger than each rect so glow is not clipped. colors overlap, blurs mix → soft multi hue cloud.

7. final svg sample

note: for the demo above I nudged the w, h & viewBox so it sits nicely inside this post layout. if you want the exact original lovable sizing just grab the raw file -download