Some time ago I build a single-pager for my wife’s meditation course: https://mbsrinenglish.com/

Although it is a basic site, I was happy with it, because a) my wife is happy with it, b) it accomplishes everything she needs, and c) it is always fun for me to code just HTML and CSS… :-)

I especially enjoy how the hero image fade-in serves as a visualization for the tagline “bringing life into focus”.

But one thing that always bugged me is that you just see this big blank background color behind the hero content before the image has downloaded enough to start fading in:

Back then, I had this notion of creating a CSS gradient to mimic the image until it downloaded, thinking this would give an immediate background “image” while waiting for the image download, but I didn’t know exactly how to do that, and at the time I just didn’t have the time/energy to work it out…

Well, as I am currently unemployed (happy to chat with anyone interested! :-), I suddenly have some time and energy, so I decided to play!

And now, the hero component initially renders with this cool conic-gradient as the hero background, then the image downloads and fades in right over top of it…

I am quite pleased with how the patterns line-up with the actual image!

Here’s a side-by-side comparison video, mostly because I just love making those:

While this does not help the actual LCP (it is delayed by the fade-in animation), it does help with perceived performance, and is a nice lead-in to the “bringing life into focus” sensation…

I ended up using two separate conic-gradients, because it looks a lot better with two “center points”:

div {
  /* The dominant color, the aqua, is allowed to show through in places */
  background-color: #c5dce5;
  /* The conic-gradients, one section for each "swatch" */
  background-image: 
    /* The first conic is for the left-side, the "6-12 o'clock" */
    conic-gradient(
      from 0deg at 50% 50%, /* Starting at 12 o'clock, center */
      transparent 140deg, /* transparent until 140deg */
      #78726f 150deg 200deg, /* brown, 5-7 o'clock */
      #133e44 225deg 275deg, /* dark-green, 7-9 o'clock */
      #265c65 285deg 300deg, /* lighter-green, 9-11 o'clock */
      transparent 330deg /* fade-out back to 12 o'clock */
    ),
    /* The second conic is for the right-side, the 12-6 o'clock, which has a slightly different center point */
    conic-gradient(
      from 0deg at 60% 60%, /* Starting at 12 o'clock, low-right of center */
      transparent 30deg, /* transparent until 40deg */
      #bbc5c0 40deg 45deg, /* light-green, 1-2 o'clock */
      #c9b49a 55deg 65deg, /* light-brown, 2-3 o'clock */
      #9e8450 105deg 120deg, /* orange-brown, 3-5 o'clock */
      #5e878b 140deg 160deg, /* aqua-green, 5-6 o'clock */
      transparent 180deg /* fade-out until to 6 o'clock */
    );
  filter: blur(3rem); /* This helps "blend" the edges, and more importantly the center-points, of each gradient */
}

I initially worked this out using CodePen, which might be nicer place to examine the code because that is really “just what you need” for the effect. I also added a slider to let you play with the image opacity, to help see how things line-up:

Anyhow, that’s it for this one…

Happy gradienting,
Atg

Top⇪