Gradient background throughout the page

Feature Requests
1

Hello Softr & the Community.

I am struggling to have a gradient or maybe something like a “duotone mesh gradient” akin to the welcome block applied throughout the home page. It gently floating would be even more beautiful.

A lot of modern websites have gradient backgrounds or moving shapes throughout their home / landing page.

It’s nice that Softr has recently introduced gradient background for some of its static blocks, but this doesn’t work well as you start stacking blocks on top of each other. We need a consistent gradient or shapes background applied throughout the entire page, encompassing all of the blocks. Obviously, if I enable these on every block, the gradient or shape consistency breaks at the seams between the blocks.

Thank you

2

The majority of modern websites use interesting background patterns (gradients, clouds, shapes, etc…) spanning the entire pages, especially home and landing pages. These give pages a definite oomph.

Since Softr’s system is based on stacking blocks, block-wide gradients do not work for the entire page. It has be defined at the page level.

Consulted Sonnet 4.6.

It confidently told me this can be done and gave me the code for it to be placed in the page’s header custom code. Except that it doesn’t work…

Softr or community, any thoughts?

<style>
  /* === Animated Cloud Background === */
  body {
    background-color: #f5f5f0;
    background-image:
      radial-gradient(ellipse 80% 60% at 20% 15%, rgba(255,255,255,0.95) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 75% 10%, rgba(240,242,245,0.9) 0%, transparent 65%),
      radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255,255,255,0.85) 0%, transparent 60%),
      radial-gradient(ellipse 90% 40% at 10% 60%, rgba(235,238,242,0.8) 0%, transparent 70%),
      radial-gradient(ellipse 65% 45% at 85% 55%, rgba(255,255,255,0.9) 0%, transparent 65%),
      radial-gradient(ellipse 75% 50% at 40% 80%, rgba(240,243,246,0.85) 0%, transparent 60%),
      radial-gradient(ellipse 55% 60% at 65% 90%, rgba(255,255,255,0.8) 0%, transparent 65%);
    min-height: 100vh;
  }

  /* Floating cloud layer overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 120% 80% at -10% 30%, rgba(255,255,255,0.6) 0%, transparent 55%),
      radial-gradient(ellipse 100% 70% at 110% 20%, rgba(245,247,250,0.7) 0%, transparent 50%),
      radial-gradient(ellipse 110% 60% at 50% -10%, rgba(255,255,255,0.5) 0%, transparent 50%),
      radial-gradient(ellipse 90% 80% at 20% 110%, rgba(240,243,248,0.6) 0%, transparent 55%);
    animation: cloudDrift 30s ease-in-out infinite alternate;
  }

  /* Drifting animation */
  @keyframes cloudDrift {
    0%   { transform: translate(0px, 0px) scale(1); opacity: 1; }
    33%  { transform: translate(18px, -12px) scale(1.02); opacity: 0.95; }
    66%  { transform: translate(-12px, 8px) scale(0.99); opacity: 1; }
    100% { transform: translate(10px, -6px) scale(1.01); opacity: 0.97; }
  }

  /* Ensure Softr page content sits above the background */
  #root,
  [data-block-type],
  .softr-page,
  main {
    position: relative;
    z-index: 1;
  }
</style>