About css gradient generator
A CSS gradient is a smooth transition between colours that the browser draws itself, so it needs no image file and scales to any size.
Linear and radial
- Linear gradients run along a line at an angle, for example 135deg for diagonal.
- Radial gradients spread outwards from a point as a circle or ellipse.
- Add colour stops with positions to control where each colour peaks.
Making gradients that look good
Use colours that are close on the colour wheel for smooth results. Strongly different colours can produce a muddy grey in the middle. Keep text readable over the gradient by checking contrast at its lightest and darkest points.
Using the CSS
Copy the generated line into a background or background-image property. Add a plain background-color before it as a fallback for very old browsers.
