生产可用渐变

渐变

适用于背景、图表、徽章和界面强调时刻的渐变配方。

渐变配方

格式

CSS

适用场景

Web UI

这些渐变控制了色相变化和色标位置，因此在浅色与深色表面中都更容易保持可用性。

精选资源

极光课程

linear-gradient(135deg, #ECFEFF 0%, #EEF2FF 52%, #FFF7ED 100%)

柔和的教学页面背景，并能保证上方黑色文字可读。

色值

#ECFEFF

#EEF2FF

#FFF7ED

信号按钮

linear-gradient(120deg, #2563EB 0%, #7C3AED 55%, #E11D48 100%)

适合行动按钮的小面积渐变，边缘对比清晰。

色值

#2563EB

#7C3AED

#E11D48

数据热度

linear-gradient(90deg, #DBEAFE 0%, #38BDF8 45%, #DC2626 100%)

表达强度递增的顺序色带，避免突兀跳色。

色值

#DBEAFE

#38BDF8

#DC2626

平静页眉

radial-gradient(circle at top left, #CCFBF1 0%, #F8FAFC 50%, #E0E7FF 100%)

低饱和页眉背景，适合文档和资源索引页面。

色值

#CCFBF1

#F8FAFC

#E0E7FF

最佳实践