CSS 渐变 ¶

线性渐变 ¶

从左到右的线性渐变，渐变起点为 crimson ，终点为 coral

html

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: linear-gradient(to right, crimson, coral);
  }
</style>

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: linear-gradient(to right, crimson, coral);
  }
</style>

还可以设置多个颜色值，让颜色渐变更加平滑

html

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: linear-gradient(to right, #03a9f4, #2196f3, #9c27b0, #f44336);
  }
</style>

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: linear-gradient(to right, #03a9f4, #2196f3, #9c27b0, #f44336);
  }
</style>

径向渐变 ¶

提示

径向渐变是指从一个中心点开始逐渐向四周进行颜色渐变的过程.

html

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: radial-gradient(circle at center, crimson, coral);
  }
</style>

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: radial-gradient(circle at center, crimson, coral);
  }
</style>

渐变阴影 ¶

html

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: radial-gradient(circle at center, crimson, coral);
    position: relative;
  }
  .container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, crimson, coral);
    border-radius: inherit;
    filter: blur(25px) brightness(1);
    transform: translateY(0) scale(1);
    z-index: -1;
  }
</style>

<div class="container"></div>
<style>
  .container{
    height: 200px;
    width: 200px;
    border-radius: 16px;
    background: radial-gradient(circle at center, crimson, coral);
    position: relative;
  }
  .container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, crimson, coral);
    border-radius: inherit;
    filter: blur(25px) brightness(1);
    transform: translateY(0) scale(1);
    z-index: -1;
  }
</style>