Gradient CSS
CSS Gradient Generator with Color Steps
Create a two-color linear CSS gradient, adjust the angle, copy background CSS, and export smooth intermediate color steps.
135°
Gradient CSS
background: linear-gradient(135deg, #6366F1, #EC4899);Transition steps
How to use this tool
Build a practical gradient for backgrounds, cards and hero sections. Pick two colors, rotate the direction, preview the final CSS and copy a stepped palette for charts or fallback tokens.
- 1 Choose the start and end colors.
- 2 Set the gradient angle.
- 3 Copy the CSS gradient or intermediate color steps.
Frequently asked questions
What CSS does this generate?
The tool generates a linear-gradient() background declaration using your two colors and angle.
Can I copy individual gradient stops?
Yes. The stepped palette can be copied as individual Hex colors or as a complete list.
Should gradients be checked for contrast?
Yes. Text over a gradient should be tested against the lightest and darkest relevant areas.
Is the gradient generated on the server?
No. The preview and CSS are generated in the browser from your chosen values.