Image Effects: Radial Gradients with CSS

Radial gradients can be either circular or elliptical in shape. A radial gradient starts in the center and spreads outward like ripples in concentric circles or ellipses. The color and radius of each circle or ellipse are defined by points on an imaginary line (the gradient ray) that starts from the center and extends outward horizontally. A radial gradient is therefore defined in terms of its center, the ending shape contour and position, and color stops along the gradient ray. Radial gradients are created in CSS by using the CSS radial-gradient() function with the background-image or background property. The parameters taken by function are listed in Table 16.2.

The syntax for specifying these values to create a gradient is:

background: radial-gradient(<shape> <size> at <position>, color-stopl, color-stop2, …);

Figures 16.11 and 16.12 show the codes for how the radial- gradient function is used and Figure 16.13 the result.

The declarations in the rules work in similar ways as explained under linear gradients. The #gradient1{} rule specifies a circular-shaped gradient that touches the farthest corner of the <div> element’s box, has its center at the top-right corner of the box, starts with yellow, and changes to dark orange at 50% along the gradient ray. The #gradient2{} rule specifies the same, except that the gradient’s center is positioned differently. Similarly, gradients defined in the #gradient3{} and #gradient4{} rules are the same, except that they have different sizes. In the #gradient5{} rule, the distinct boundary between the colors was created by specifying the same color stops for the colors. In the #gradient6{} and #gradient7{} rules, no color stops are specified, so the colors are evenly spaced out. The #gradient8{} rule shows how the shape of a gradient can be specified with length values instead of keywords. The first value specifies the horizontal radius, and the second vertical. Equal values specify a circle and non-equal ones create an ellipse.

1. Example Application of Radial Gradient

One of the common ways radial gradients are used, apart from their use in buttons, is using them for background, usually in less formal websites. Figures 16.14 and 16.15 show an example.

In the #gradient{} rule in the example, the width and height properties specify the size of the <div> element and the alignment and size of the text. The radial-gradient() function says to create an elliptical gradient that touches the farthest corner of the <div> element’s box, has its center at the top-right corner of the box, and starts with yellow that begins to change to dark orange at 5% along the gradient ray.

2. Repeating Radial Gradient

Like linear gradients, radial gradients can be repeated to create patterns. You can achieve this by using the repeating-radial-gradient() function and the same value types as a radial gradient. Figure 16.16 shows an example and Figure 16.17 the result.

In the #outerbox{} in the example, the width property specifies the width of the <div> element of id=“outerbox” (i.e., the bigger box), the border property says to make the element’s border 1px-thick solid line and pink, and the background-color property gives the background rgba(255,192,203,0.3) color. The #gradient{} rule sets the size of the <div> element of id=“gradient” (i.e., the smaller box), the color and size of its text content, and the alignment of the text. The repeating-radial-gradient() function says to create and repeat a circular gradient that touches the farthest corner of the element’s box, has its center at the top-right corner of the box, and starts with transparent, changes to rgba(255,192,203,0.4) after 40px, and then to rgba(255,255,255,0.2) after 50px. Using transparency makes the colors less imposing, making the pattern more suitable, for example, for a background.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *