مُولِّد تدرجات CSS

(التوثيق بالإنجليزية)

What it does

Build linear, radial, and conic CSS gradients with multiple color stops and positions. Adjust the angle, add or remove stops, and grab copy-ready CSS - with a live preview. 100% client-side.

How to use it

1. Pick a Type (linear / radial / conic) and, where relevant, an Angle.
2. Add color stops, set each stop’s color and position.
3. Copy the CSS.

Examples

Linear 90°, #6366f1 → #ec4899 →

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Good to know

• Private: all generation is local.
• Stops are sorted by position automatically.
• Related tools: Color Picker, Palette Generator.