文字颜色渐变

夫天地者万物之逆旅也
光阴者百代之过客也。

.text-clip{
  color:transparent;
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(45deg, rgba(0,173,181,1) 0%, rgba(0,173,181,.4)  100%);
  -webkit-background-clip: text;
}

TIP

利用的是 -webkit-background-clip: text 属性，也可以将背景颜色设置为背景图

文字模糊

而浮生若梦，为欢几何？

.text-blurry{
  text-align: center;
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

空心文字

古人秉烛夜游，良有以也

.hollow-text {
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882),
  0 0 2px rgba(0, 173, 181, .2882);
}

文字外发光

况阳春召我以烟景，大块假我以文章

.glow-text{
  line-height:60px;
  background: #00adb5;
  color:#fff;
  text-align: center;
  text-shadow: 0 0 0.1em, 0 0 0.3em;
}

文字阴影

会桃花之芳园，序天伦之乐事

.text-shadow{
  color:#00adb5;
  text-shadow: 1px 1px rgba(0,173,181,.2882),
  2px 2px rgba(0,173,181,.2882),
  3px 3px rgba(0,173,181,.2882),
  4px 4px rgba(0,173,181,.2882);
}