Share
Visually build CSS gradients and copy the CSS output.
Build beautiful CSS gradients visually. Choose linear, radial, or conic gradient types. Add and reorder color stops with a color picker. Adjust angle, position, and shape. Copy the generated CSS code instantly.
Create custom linear, radial, or conic CSS gradients visually and export the code for your web projects.
Select your preferred gradient type
Choose between linear, radial, or conic gradient styles to define the base structure of your background.
Add and arrange color stops
Use the color picker to select colors and drag the stops to reorder them along the gradient scale.
Adjust the angle and position
Fine-tune the direction of the gradient by modifying the angle degrees or setting the shape's center position.
Copy the generated CSS code
Once you are satisfied with the visual preview, click to copy the CSS output directly to your clipboard.
Estimated time: PT1M
Share this tool
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);