Trending Gradient Palettes
Gradient Type
Rotation Angle135°
Color Stops (2)
0%
100%
Real-Time Canvas Preview
Modern Gradient UI
Smooth CSS color transitions optimized for modern web interfaces.
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
生成渐变背景步骤
- 1选择渐变类型：线性 (Linear)、径向 (Radial) 或锥形 (Conic)。
- 2在色阶轴上点击新增颜色锚点，自由调整位置与透明度。
- 3调整旋转角度，复制生成的 CSS 代码嵌入您的网页样式表。
替代传统图片，提升 LCP 核心指标
CSS 渐变相比加载大体积 PNG/JPEG 背景图几乎不占用网络带宽，同时在任何视网膜高分屏上均能保持绝对清晰无锯齿。
Architecture & Privacy
- Full CSS3 Gradient Specification support: Covers linear-gradient(), radial-gradient(), and conic-gradient().
- Sorted Color Stop calculation: Automatically normalizes percentage offsets across transitions.
- Tailwind Arbitrary Syntax converter: Generates underscore-sanitized bg-[linear-gradient(...)] utility strings.
- High performance: Real-time rendering with zero external DOM overhead.