CSS Visual ToolsLesson 70Free preview

Gradient Generator

This lesson is part of Web Developer Tools · All levels

Summary

Gradient generators create CSS code for the gradual color transition, either straight, radial, or circular. You can set the direction, the color stop position, and the transparency and then copy the result to the style sheet. Gradien helps make the background more interesting without requiring a picture file.

Key points

Linear-gradients make color transitions along a straight line
Radial-gradients radiate from the central point
Conic-gradient rotates around the center point
Color stop determines position and color on the gradient
Gradien is a CSS image so it is installed via background or background-image.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.