css radial-gradient繪製漸變背景

radial-gradient是一個很酷的css屬性。我們可以用它給元素繪製出很有感覺的漸變背景。如果你不經常用它，會發現它的語法不太容易記憶，相比較於linear-gradient() 要稍微複雜一些。本文通過2個例子，帶你領略一下它的魅力。

漸變背景色

<div class="hire_wrapper"></div>

.hire_wrapper {
  background: radial-gradient(circle at 22% 5%, rgb(85, 55, 101), rgb(30, 38, 74) 76%);
  height: 100vh;
}

可以在瀏覽器渲染出，下面的背景漸變：

線上演示地址

高光文字

<h1>Syncopate</h1>

@import url(https://fonts.googleapis.com/css?family=Syncopate);

body {
  height: 100vh;
  background: radial-gradient(
    circle closest-corner at center 125px,
    #222,
    black 40%
  ) no-repeat;
  text-align: center;
}
h1 {
  display: inline-block;
  padding-top: 100px;
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  background: radial-gradient(
    circle farthest-corner at center center,
    #ccc,
    #333
  ) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

渲染出下面的結果：

線上演示地址

背景跟隨滑鼠漸變動畫

如果再加入一些滑鼠移入事件，可以做出更加屌炸天的效果，比如這個：

日出

參考連結

文章首發於 IICOOM-個人部落格 《css radial-gradient繪製漸變背景》