1.bg-gradient

普通渐变

1.bg-gradient-to-{方向}

t (top)
b (bottom)
l (left)
r (right)
2.设置起始颜色 中间颜色和结束颜色
from-blue-500 (开始颜色)
via-purple-500 (中间颜色)
to-pink-500 (结束颜色)
备注:中间颜色是可选的

举例





  
  
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>



  
    
      bg-gradient-to-t
    
    
      bg-gradient-to-b
    
    
      bg-gradient-to-l
    
    
      bg-gradient-to-r

bg-linear 支持更多的渐变方向





  
  
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>



  
    
      bg-gradient-to-t
    
    
      bg-gradient-to-tr
    
    
      bg-gradient-to-r
    
    
      bg-gradient-to-br
    
    
      bg-gradient-to-b
    
    
      bg-gradient-to-bl
    
    
      bg-gradient-to-l
    
    
      bg-gradient-to-tl

2.bg-radial

基于中心向外渐变

举例




  
  
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

3.bg-conic

基于角度渐变




  
  
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Tailwind CSS 颜色介绍—渐变（css渐变色代码 rgba）

1.bg-gradient

2.bg-radial

3.bg-conic