how to 2 colors as linear gradient side by side in center css

user_4649374 0
Viewed 228

I have a design in that there is two color as background centered side by side. I have tried to achieve the result using radial-gradient. But I didn't find any solution to add two colors. Please check the below image for the design.

enter image description here

How to achieve the above background design. The 2 colors used is #D0F9F3 and #E3E5FD. I have tried using the below code.

display: flex;
justify-content: center;
align-items: center;
padding: 100px 0;
background: radial-gradient(circle, #D0F9F3, #F3F8FF 250px);
background-repeat: no-repeat;

But the above code only produce 1 color. How to add two colors side by side? Is it possible?

css html
4 Answers

The problem is both color are white-blue shades hence you can see only one color but if you see the color in a hex color code generator website it is seen that both color are way similar to each other.

https://htmlcolorcodes.com/color-picker/
Type the above color hex codes and see the colors both are same, I recommend using different colors as it would be visible to eyes and hence also increasing the SEO.

user_159359440 

#grad-div{
  height:100vh;
  width:100vh;
  outline: 1px solid red; /* for visualising */
  background: radial-gradient(#D0F9F3, #F3F8FF,#FFFFFF); /* use background color for the third color */
}
<div id="grad-div"></div>

user_119583600

You can use two radial-gradients, and then make them look side by side by changing their positions.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.gradient {
  position: absolute;
  width: 80%;
  height: 100%;
}

.gradient-1 {
  left: 0;
  background: radial-gradient(circle, purple, transparent 250px);
}

.gradient-2 {
  right: 0;
  background: radial-gradient(circle, green, transparent 250px);
}
<div class="box">
  <div class="gradient gradient-1"></div>
  <div class="gradient gradient-2"></div>
</div>

More Explanation

  • Make gradients absoulte, so they can be positioned on top of each other easily.
  • use transparent for the background's third parameter so you only get a gradient and nothing more.
  • Make each gradient box width less than 100% (like width: 80%) so one of the is aligned to right (with right: 0) and the other one is aligned to left (left: 0)
user_73303160

Solution with linear-gradient and filter.

  1. Position element to the center with position: absolute and z-index: -1; so as not to interfere with the main content.
  2. Use breakpoints in the linear-gradient to get desired result.
  3. Apply the filter: blur() method to smooth out the edges.

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: hsl(215, 100%, 98%);
  position: relative;
  overflow-x: hidden;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding: 1em;
}

.main h1 {
  font-size: 1.6em;
  text-align: center;
  color: #8aa1e0;
}

.main input {
  min-width: 500px;
  max-width: 800px;
  padding: 0.5em;
  background-color: black;
  color: white;
  border: none;
}

.circle {
  width: 500px;
  height: 400px;
  border-radius: 50%;
  position: absolute;
  top: 55%;
  left: 50%;
  background: linear-gradient( 90deg, hsl(235, 90%, 90%) 40%, hsl(171, 80%, 80%) 30%, hsl(171, 80%, 80%) 70%, hsl(235, 90%, 90%) 70%);
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}
<div class="main">
  <h1>I'm looking for a</h1>
  <input type="text" />
</div>
<div class="circle"></div>

user_155451160
Related