html - 如何在中心CSS中并排两种颜色作为线性渐变

Question

我有一个设计，有两种颜色作为背景并排居中。我尝试使用radial-gradient来实现结果。但我没有找到任何添加两种颜色的解决方案。请检查下面的设计图片。

如何实现上述背景设计。使用的 2 种颜色是 #D0F9F3 和 #E3E5FD。我尝试过使用下面的代码。

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

但是上面的代码只产生一种颜色。如何并排添加两种颜色？可能吗？

Answer 1

使用线性渐变和过滤器的解决方案。

1. 使用 position:absolute 和 z-index: -1; 将元素定位到中心，以免干扰>主要内容。
2. 在线性渐变中使用断点以获得所需的结果。
3. 应用 filter:blur() 方法平滑边缘。

*,
::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>