From the course: CSS: Enhancing Website Graphics

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a radial gradient

Create a radial gradient - CSS Tutorial

From the course: CSS: Enhancing Website Graphics

Start my 1-month free trial

Create a radial gradient

“

- [Instructor] In the last video, we used linear gradients to create color blends that follow a straight line across the element background. In this video, we'll explore how to create radial gradients. In a radial gradient, the sequence of blended colors starts from a central point and moves outward in all directions. Radial gradients are defined using the radial-gradient function. And, like linear gradients, the function uses a list of color values, in which the first color, red in this case, is placed at the center, followed by the next color, yellow, and then the last color, blue, which forms the end of the gradient. Let's create a radial gradient as part of the background of this page, which contains the text of a Whitman poem. I'll insert the radial gradient as a new background layer. Once again, I use the radial-gradient function and, the color at the center of the radial gradient, we'll make white. The next color in the list will be a semi-transparent yellow, followed by…

Contents