CSS Gradient Generator
Build a linear or radial gradient with as many colors as you want, adjust the angle/direction and each color's position, see the live preview and copy the ready-to-use CSS code.
90°
What are CSS gradients?
A gradient is a smooth transition between two or more colors. In CSS, they are values of the
background property (actually an image generated by the browser). A
linear-gradient goes from one side to another along an angle; a
radial-gradient radiates from a central point in the shape of a circle or ellipse.
Each color can have a position (in %) that controls where it sits in the transition.
How to use
Choose the type, adjust the angle (linear) or the shape (radial), and add or remove colors. For
each color you set the hue (color picker) and, optionally, the position. The preview updates on
the fly and the code field provides the ready CSS line, for example
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);.
Frequently Asked Questions (FAQ)
How does the preview avoid security risks?
The gradient applied to the preview is built only from values validated by the code itself: colors come from color pickers (always a valid hexadecimal) and positions are numbers limited to 0–100%. No free-form text is ever injected as CSS or HTML, which eliminates the risk of injection.
Can I use as many colors as I want?
Yes. Use "Add color" to create new stops and "Remove" to take them out (keeping at least two, which are required for a transition to exist).
What is the difference between circle and ellipse in radial gradients?
A circle keeps the same radius in every direction; an ellipse follows the element's aspect ratio, which can look oval in rectangular areas.