How to Build a Complex, Spatial Gradient Without Images

If you ever wanted a complex gradient but without any images, which makes it super cool and not heavy for page load, I’ve got a pretty easy fast tutorial for how to create a spatial gradient without images.

So, here are the steps for you to take:

In your CSS, make sure your body has the following CSS.

body {
  background: radial-gradient(circle at top right, rgba(255, 200, 255, 0.6) 0%, rgba(128, 8, 197, 0.5) 25%),
  radial-gradient(circle at center right, rgba(255, 100, 200, 0.5) 30%, rgba(0, 12, 240, 0.646) 70%),
  linear-gradient(312deg, #a707af 0%, #C875E0 25%, #FF00B0 50%, #002cf0 100%);
  background-blend-mode: screen, overlay, normal;
  height: 100vh;
  margin: 0;
}

So, what is happening in the code is you have two kinds of gradients blending into each other, making the background image very sophisticated. Here is the breakdown:

• radial-gradient creates circular “light spots.”
• linear-gradient provides the base flow of colors.
• background-blend-mode mixes them together like Photoshop layers.

This gives you a glowing, special feel without any images.

TIP: Change the gradient positions (I have marked them bold below) to move the light sources:

background: radial-gradient(circle at top left, rgba(255, 200, 255, 0.6) 0%, rgba(190, 120, 230, 0.5) 25%),
radial-gradient(circle at center right, rgba(255, 100, 200, 0.5) 30%, rgba(0, 236, 240, 0.5) 70%),
linear-gradient(312deg, #FEEAFF 0%, #C875E0 25%, #FF00B0 50%, #00ecf0 100%);

You can try a combination of different positions to see how it affects your spatial gradient without images. If you have difficulty seeing the changes after a simple refresh, click here to read how to automatically update the CSS version of your HTML page.