CSS Gradient: Crash Gradient Course

In the past, most websites used images to create beautiful UIs. Thanks to various CSS attributes, this trend has changed. This tutorial will help you learn CSS gradients. You can replace various UI elements as well as images in the background using gradients. With a little practice, you can create complex patterns without using any images.

CSS gradients are well supported in the browser, allowing you to create smooth visual transitions between two or more specified colors. Gradients allow you to control many settings such as the size, angle, color stop position of the gradient, etc.

In this article, I will introduce linear, radial, and newer repeat gradients.

Key Points

• CSS gradients are widely supported in the browser, allowing smooth transitions between two or more specified colors and controlling many settings such as size, angle, and color stop position.
• Linear gradients are the most commonly used gradients, transitioning from one color to another along a straight line. This can be controlled by specifying direction or angle.
• Radial gradient transitions colors in a circular or elliptical pattern, starting at a single point and expanding outward. Various parameters can be used to control the shape, size and position of the radial gradient.
• Repeat gradients are similar to other gradients, but repeat the color stop position infinitely, allowing for the creation of complex patterns and backgrounds. They take the same parameters as non-repetitive gradients.

Linear Gradient

Linear gradient is the most commonly used gradient. It looks like this, the value in brackets indicates the type of the value:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

If you do not specify the orientation, the gradient starts at the top, with the full intensity of the first color, and then smoothly transitions to the last color when you reach the bottom.

For more control, you can specify the direction of the gradient. You can use simple terms (such as left, bottom right) to implement it, or specify angles. The following code snippet creates a background from left to right:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

View the example on CodePen: Left to Right Linear Gradient

Older browsers support slightly different syntaxes and require browser-specific prefixes. In older browsers, you specify a starting point instead of an end point. The CSS3 gradient code of the old browser is as follows:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

Specify angle for linear gradient

If you need to create gradients at specific angles, you can specify an angle directly. The following code creates a gradient of 60 degrees:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

Treat the line from bottom to top as zero, and if the line moves clockwise, the angle increases. For example:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

This will create a gradient with red at the bottom and blue at the top. And the following code will create a horizontal gradient with red on the left and blue on the right:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

View the example on CodePen: Linear Gradients with Different Angles

Specify color stop position in linear gradient

If you want to change the color unevenly, you can specify the color stop position yourself. The color stop position can be specified as a percentage value or an absolute length. You do not need to specify a stop position for the first and last colors. A given color has its full intensity at its specified color position. Here is an example:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

If no stop position is specified, the colors will be evenly spaced.

View the example on CodePen: Linear Gradient with Color Stops

Radial Gradient

Radial gradients are less common and more complex. This is the syntax of radial gradient:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

When nothing is specified, the default shape is an ellipse, the size is the farthest angle, and the position is the center. The color stop position is specified exactly the same way as the linear gradient. The following code snippet will draw an elliptical radial gradient:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

View the example on CodePen: Radial Gradient Example

Change the size of the radial gradient

The size of the radial gradient is determined by four values: closest-side, farthest-side, closest-corner and farthest-corner. When used with shape values, these keywords define shapes. The shape of the gradient works when the gradient will continue to extend infinitely beyond the boundaries of the elements where the gradient is applied.

Let's look at an example to make this clearer. We will create four gradients on four elements:

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

In the following CSS, I used four keyword values:

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

View the example on CodePen: Radial Gradients with Different Size Keyword Values

Note that there are subtle but obvious differences between each gradient during the demo.

Define the color stop position in radial gradient

The color stop position in the radial gradient is similar to a linear gradient. Note that I also specify the position of the center of the circle as a percentage. Pixel values ??can also be used if desired. Here is a code snippet to demonstrate this:

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

View the example on CodePen: Radial Gradient with Color Stops

Repeat gradient

Repeat gradients are similar to other gradients and take the same parameters. The only difference is that they repeat the color stop position infinitely. The position of the color is offset according to multiples of the base gradient length. As you will see, this repetition allows us to create complex patterns and backgrounds.

One thing to note is that when you use multiple repeat gradients on the same element, the first gradient will be displayed at the top. Of course, this means that if each color of the first gradient is 100% opaque (i.e. no transparency), the other gradients in the stack will not be visible.

Repeat linear gradient

To create a basic repeating linear gradient, we can do the following:

<code>.example {
  background: linear-gradient(
    [方向], [第一種顏色], [第二種顏色], [更多顏色 ...]
  );
}</code>

View the example on CodePen: Repeating Linear Gradient

To change the color suddenly, you must specify two colors. To create a subtle pattern, you just add another gradient, just like adding multiple background images:

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

This time I set the gradient to transparent instead of white. I suggest you try different colors stop positions and angles.

View the example on CodePen: Repeating Linear Gradient with Multiple Gradients

Repeat radial gradient

Repeat radial gradients are similar to standard radial gradients. Here is the code for creating a simple repeating radial gradient:

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

View the example on CodePen: Repeating Radial Gradient

You can also layer multiple repeating radial gradients like this:

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

View the example on CodePen: Repeating Radial Gradient with Multiple Gradients

Conclusion

In this tutorial, I try to cover all aspects of CSS gradients. In many cases where simple patterns are required, gradients can eliminate the need to use images. Of course, while gradients do avoid additional HTTP requests for images, they can still cause performance issues and should be used with caution.

Frequently Asked Questions about CSS Gradients

What is the difference between linear gradient and radial gradient in CSS?

In CSS, gradients are used to create smooth transitions between two or more specified colors. The linear gradient transitions the color along the line, starting from one point to ending from another point. The direction of the gradient can be defined by angles (e.g. "to right" or "45deg") or by declaring the starting point (e.g. "to top right").

On the other hand, the radial gradient transitions in a circular or oval pattern to the color. They start at a point and expand outward, creating a circular or oval shape. Various parameters can be used to control the shape, size and position of the radial gradient.

How to create repeating gradients in CSS?

CSS provides a way to create repeated gradients using repeating-linear-gradient() and repeating-radial-gradient() functions. These functions work similarly to their non-repetitive counterparts, but they repeat the specified gradient pattern indefinitely, creating a seamless repeat pattern. The syntax of these functions is similar to that of linear-gradient() and radial-gradient(), but you need to specify the color stop position in the way you create a repeating pattern.

What is the color stop position in the CSS gradient?

The color stop position is the color you want to render a smooth transition and the points each color should appear in the gradient. In a CSS gradient, you can specify as many color stops as you want. Each color stop position is defined by a color value followed by an optional length or percentage. If you do not specify length or percentage, the color stop positions will be evenly spaced.

How to control the direction of linear gradient?

The first parameter of the linear-gradient() function can be used to control the direction of the linear gradient. This parameter can be an angle (eg "45deg") or a keyword that specifies the starting point, such as "to right" or "to top left". If you do not specify the direction, the gradient will go from top to bottom.

How to control the shape and size of radial gradients?

The first parameter of the radial-gradient() function can be used to control the shape and size of the radial gradient. This parameter can be a shape keyword ("circle" or "ellipse"), followed by an optional size keyword ("closest-side", "farthest-side", "closest-corner", "farthest-corner") and /or location. If you do not specify a shape, the gradient becomes an oval. If you do not specify the size, the gradient will extend to the nearest side.

Can I use transparency in CSS gradient?

Yes, you can use transparency in CSS gradients by using RGBA color values. The RGBA color value is specified by: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

How to create a gradient with hard color variation?

To create a gradient with hard color changes, you can use multiple color stop positions with the same position. For example, "blue, green 50%, green 50%, yellow" creates a gradient that suddenly changes from blue to green in the middle and from green to yellow at the end.

Can I use gradients as background image?

Yes, you can use gradients as background image in CSS. The gradient function returns the CSS image data type and can be used anywhere the image can be used. For example, you can use gradients as background image for elements, or as part of multiple backgrounds.

Can I animate gradients in CSS?

CSS does not support direct animation gradients. However, you can achieve similar effects by animate background-position or background-size of elements with repeated gradients, or by using gradients as a mask on the animation content.

Does all browsers support CSS gradients?

CSS gradients are widely supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 10 and later. However, for older browsers that do not support gradients, you should provide alternate colors.

The above is the detailed content of CSS Gradients: A Syntax Crash Course. For more information, please follow other related articles on the PHP Chinese website!