I'm looking to create a gradient background for my page that transitions from light blue in the center to dark blue on the sides in a symmetrical way. I've tried using a linear gradient that goes from left to right, but it doesn't achieve the symmetry I desire.
One solution I considered was dividing the body section into two 50% width divs and styling them with float: left so that the left side mirrors the right side. However, I feel like there must be a simpler and more concise approach to accomplish this. I'm also concerned that adding two divs just for colors might cause issues with future divs.
Below is the HTML and CSS code I have so far:
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(to right, #3498db, #162ba4);
}
.main-container {
padding: 20px;
background: rgba(244, 228, 228, 0.532);
/* main divs color */
border-radius: 20px;
backdrop-filter: blur(10px);
/* blur */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* shadow */
}<div class="main-container">
<!-- content -->
<h1>My page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>