CSS gradient creator
Build the gradient you actually mean.
Choose the gradient geometry, set exact color stops and opacity, then use the same values for the live preview and exported CSS.
- Exact stop positions
- Hard stops supported
- Works in this browser
Gradient settings
Every valid change updates the preview and CSS immediately. Invalid values stay editable without being silently changed.
Geometry
degrees
Enter an angle from 0 to 360.
Use a value from 0 to 360.
%
Enter a center value from 0 to 100.
%
Enter a center value from 0 to 100.
Use values from 0 to 100 for the horizontal and vertical center.
Color stops
Positions are sorted from 0% to 100% for CSS output. Stops at the same position keep their list order, so you can create a hard edge.
-
{{ t('stops.itemTitle', { number: index + 1 }) }}
Enter a HEX color such as #1F4E79.
Opacity and position
%Enter opacity from 0 to 100.
%Enter a position from 0 to 100.
A gradient needs at least two stops.