Making Glowing Background with CSS only

Question

I want to create this background in CSS only.

I want to do it with CSS to avoid responsive issues.

Answer 1

You can make use of radial-gradient to produce the glow effect. You can change the colors to be inline with the image.

One thing you should note is the browser support for CSS gradients. IE < 10 do not support them. If you need support for older browsers then CSS gradients would not help.

body {
  background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(29, 84, 166) 100%);
  height: 100vh;
}

<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

---

I can't see any extra steps in between but if you are looking for several steps of varying percentages then have a look at the below snippet:

body {
  background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(41, 122, 204) 30%, rgb(29, 84, 166) 70%);
  height: 100vh;
}

<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>