I would like to make a gradient on the background of the page in such a way that it is light blue in the center and turns into dark blue symmetrically to the left and right. I made gradient that goes from left to the right, but there is no symmetry as I wish.
I was thinking about dividing body section into two 50% width divs with float: left and designing the left one like a mirror reflection of the right one, but I am convinced that there is an easier and shorter way to do it. I’m also worried that creating two divs only for colors may cause problems with subsequent divs later.
Here is my code in HTML and CSS:
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>>Solution :
replace the background property in body with this line
background-image: linear-gradient(to right, #162ba4, #3498db, #162ba4);
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: linear-gradient(to right, #162ba4, #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>