π This tool has been merged into css gradient generator. Please use the new version.
Updated: 2026-07-11
Color Settings
#06b6d4
#f472b6
Quick Presets
Gradient Settings
ποΈ Preview
background: linear-gradient(to bottom, #06b6d4, #f472b6);
How to Use
Hex Gradient Generator is a client-side CSS gradient tool. Select start and end colors, choose gradient type (linear/radial), direction, and mid-steps, then preview in real time.
Click "Copy CSS" to copy the standard CSS gradient code for use in your web projects. Click "Random" for quick color inspiration.
Supports "Hard", "Smooth", and "Very Smooth" softness modes. Mid-steps insert additional transition colors between the two main colors for richer gradients.