Home > Web Front-end > Front-end Q&A > Detailed explanation of how to write css gradient color

Detailed explanation of how to write css gradient color

PHPz
Release: 2023-04-06 13:57:11
Original
2349 people have browsed it

CSS gradient color is a commonly used technology in web design. It can make the color transition of the page more natural, and can also well enhance the beauty and expressiveness of the page. Let me introduce you to how to write CSS gradient colors.

1. Linear Gradient

  1. Defining the Gradient Direction

Before defining a linear gradient, you need to consider the direction of the gradient. By default, the linear gradient is from top to bottom, which is the vertical direction, and this direction can be changed by setting the angle value.

  • If you want a gradient in the horizontal direction, you can set the corresponding angle value, for example, 0 degrees means from left to right, 180 degrees means from right to left, etc.
  • If you want a diagonal gradient, you can set an angle value with degrees.

The following are some examples of angle values:

linear-gradient(0deg, #FFDAB9, #7FFFD4);
linear-gradient(90deg, #FFDAB9, #7FFFD4);
linear-gradient(45deg, #FFDAB9, #7FFFD4);
Copy after login
  1. Define the gradient color

To define the color of the linear gradient, you need to use linear-gradient()Function.

background: linear-gradient(to right, #FFDAB9, #7FFFD4);
Copy after login

to right means a horizontal gradient from left to right, followed by the color you want to gradient. If you want to set a gradient of multiple colors for an element, you can write it like this:

background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);
Copy after login

2. Radial gradient

Radial gradient is somewhat different from linear gradient, it will start from the middle Spread outward until the entire element is covered. Defining a radial gradient requires configuring the following elements:

  1. Shape of the gradient

The radial gradient can be set to a circle or an ellipse to enable different shapes .

background: radial-gradient(circle, #FFDAB9, #7FFFD4);
background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);
Copy after login
  1. Start and end points of the gradient

A radial gradient has a light source, and the colors are diffused from a circle of varying radii that the light source starts radiating from. Therefore, we need to define the start and end points of the gradient.

background: radial-gradient(at center, #FFDAB9, #7FFFD4);
Copy after login
Copy after login

Use the at center keyword to set the light source at the center of the element.

background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);
Copy after login

Using coordinate values ​​to define the position of the light source can achieve more customized needs.

  1. Control gradient color

Similar to linear gradient, radial gradient also requires specifying the gradient color.

background: radial-gradient(at center, #FFDAB9, #7FFFD4);
Copy after login
Copy after login

The above is how to write CSS gradient color, which can be used flexibly according to needs.

The above is the detailed content of Detailed explanation of how to write css gradient color. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template