Switch between linear and radial gradients for common UI backgrounds.
Design ToolsTwo gradient modes Random palette generation Direct CSS output
Online CSS Gradient Generator
Create linear and radial gradients, try random palettes, and generate moving background effects with ready-to-copy CSS.
Banner backgroundsCampaign atmosphere layersButton and card decoration
Refresh the color mix quickly when you need a new visual direction.
Preview and copy the generated CSS without extra assembly steps.
Tool Summary
CSS Gradient GeneratorCategoryDesign Tools
Scenarios3 categories
Guides1 guides
The workspace is right below
The main action comes first. Guides, FAQ, and related tools stay below the workspace.
You can also jump to these categories
CSS 渐变生成
适合快速生成按钮背景、Banner 背景、卡片氛围光和动态渐变代码。
状态支持线性渐变、径向渐变、随机配色和 CSS 代码复制。
预览效果
Gradient Hero当前代码已经适合直接贴进页面或组件样式里。
CSS 代码
.gradient-surface {
background: linear-gradient(135deg, #1677FF 0%, #5B5CF0 50%, #8B5CF6 100%);
}How to Use
Pick a linear or radial mode, add colors, and adjust positions. The preview and CSS code update in sync.
When stuck for a direction, hit random to swap in a new palette. For atmosphere backgrounds, enable the animated flow, which outputs keyframes with the CSS.
Before applying the code, verify the effect and text contrast on buttons, cards, or banners, then ship it.
Related Guides
FAQ
Can this generate animated gradients?
Yes. Enable animation and the related keyframes are included in the CSS output.
Can I use it just for inspiration?
Absolutely. Random combinations are a quick way to find a direction before fine tuning.