时间戳

首页 > 解决方案 > 如何添加具有不同方向的多个渐变CSS

css - 如何添加具有不同方向的多个渐变CSS

问题描述

这是我正在尝试重新创建的设计，这就是我的样子。我需要一些帮助来制作顶部的渐变，因为到目前为止，我只能将其设为纯色，因为我已经为背景本身使用了渐变，而且我不知道如何组合不同的颜色渐变在一起。

.top-card {
  height: 230px;
  max-width: 295px;
  min-width: 150px;
  border-radius: 3%;
  text-align: center;
  padding: 20px 0px;
}

.instagram {
  background: linear-gradient(to top, hsl(228, 28%, 20%) 99%, hsl(37, 97%, 70%) 99%);
}
<div class="top-card instagram">
  <div class="gradient">
  </div>
  <div class="name-container">
    <img src=images/icon-instagram.svg class="top-icon" alt="instagram">
    <p class="name">@realnathanf</p>
  </div>
  <h1 class="follower-number">11k</h1>
  <p class="follower-text">FOLLOWERS</p>
  <div class="increment-container-top">
    <img src="images/icon-up.svg" class="arrow" alt="arrow">
    <p class="increment-increase">1099 Today</p>
  </div>
</div>

标签： css

解决方案

你的 html 结构会有轻微的变化，你需要做的就是用“明亮的渐变”填充父容器，在它的子容器中，用较暗的部分填充。请检查下面的代码片段以获得更好的理解：

.top-card {
  height: 230px;
  border-radius: 3%;
  text-align: center;
  padding: 20px 0px;
  }

  .gradient {
  max-width: 295px;
  min-width: 150px;
  background: rgb(248,197,117);
  background: linear-gradient(90deg, rgba(248,197,117,1) 13%, rgba(214,79,148,1) 91%);
  border-radius:3%;
  }

  .instagram {
    background: linear-gradient(to top, hsl(228, 28%, 20%) 98%, rgba(255, 255, 255, 0%) 2%);
  }
<div class="gradient">
  <div class="top-card instagram">
    <div class="name-container">
      <img src=images/icon-instagram.svg class="top-icon" alt="instagram">
      <p class="name">@realnathanf</p>
    </div>
    <h1 class="follower-number">11k</h1>
    <p class="follower-text">FOLLOWERS</p>
    <div class="increment-container-top">
      <img src="images/icon-up.svg" class="arrow" alt="arrow">
      <p class="increment-increase">1099 Today</p>
    </div>
  </div>
  </div>

推荐阅读