Config
Linear 135°, #667eea → #764ba2
CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Design Tools
CSS Gradient Generator — Linear, Radial, Conic
Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.
CSSGradientBackground
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Gradient Generator
135°
%
%
Use cases
- Design page or card background gradients
- Configure two-color or multi-stop UI transitions
- Export paste-ready gradient CSS
How to use
- Choose linear, radial, or conic
- Set angle plus stop colors and positions; add more stops as needed
- Copy the generated gradient CSS
Example input and output
FAQ
Which gradient types are supported?
linear-gradient, radial-gradient, and conic-gradient.
Can I add multiple stops?
Yes. Use Add stop, then set each stop’s color and 0–100 position.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Box Shadow Generator
CSS Box Shadow Generator — Visual Controls
Visually adjust offset, blur, spread, color, opacity, and inset. Preview live and generate box-shadow CSS for cards, buttons, and overlays.
CSS Shadow box-shadow
Color Converter
Color Converter — HEX, RGB, HSL Online
Convert colors among HEX, RGB, HSL, HWB, CMYK, and CSS variables in your browser. Includes a color picker and random color helper for design handoff, stylesheet work, and brand-color alignment.
Color HEX RGB
Palette Generator
Palette Generator — Rule-Based Color Sets
Generate palettes with monochrome, analogous, complementary, triadic, or fully random rules. Lock individual swatches and keep randomizing the rest for UI exploration and brand-color derivatives.
Palette Color Harmony