CSS: Radial gradient layer on top of background CSS styling

Question

I have a check (squared) background styled in CSS:

background-color: #2F5EC1;
    background-image:
    linear-gradient(rgba(255,255,255,.1) 2px, transparent 2px), 
    linear-gradient(90deg, rgba(255,255,255,.1) 2px, transparent 2px), 
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); 
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; 
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; 

I'd like to make it so that the lines fade out around the edges, in an ideal world, my first thought is something like layering another background colour/radial gradient on top, something along the lines of #2F5EC1 (the background blue colour), fading to completely transparent in the middle, showing through the lines fading in toward the centre of the page.

I've seen semitransparent colours layered on top of background images before, but I'm not sure how I might achieve this with the current set up, eg colour upon colours

Any help is hugely appreciated! Thank you!

Image of what roughly what I'm trying to make - I know the checks look a bit different but you hopefully get the idea of how the fadey bit should look!

:)

Answer 1

I hope it works for you, there is not really much to explain, so the code will speak for me

 #app { position: absolute; width: 100vw; height: 100vh; background-color: #2f5ec1; background-size: 40px 40px; background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); } #layout { position: absolute; width: 100vw; height: 100vh; background: rgb(47, 94, 193); background: radial-gradient( circle, rgba(63, 94, 251, 0.4) 0%, rgba(63, 94, 193, 1) 100% ); }

 <div id="app"></div> <div id="layout"></div>