How to achieve color gradient effect in css3-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to achieve color gradient effect in css3

王林

Nov 16, 2020 pm 02:36 PM

css3color gradient

How to achieve color gradient effect in css3: You can use linear-gradient function and radial-gradient function to achieve linear gradient effect and radial gradient effect respectively, such as [linear-gradient(yellow, green)].

How to achieve color gradient effect in css3

There are two types of css3 gradients: css3 linear gradient and css3 radial gradient.

(Learning video sharing: css video tutorial)

1. Linear gradient color gradient

Function:

linear-gradient () function is used to create an image that represents a linear gradient of two or more colors.

Syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Value:

direction Use the angle value to specify the direction (or angle) of the gradient.
color-stop1, color-stop2,... Used to specify the starting and ending colors of the gradient.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3 id="线性渐变-nbsp-nbsp-从上到下">线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

2. Radial gradient

function;

radial-gradient() function uses radial gradient Create "image".

The radial gradient is defined by the center point.

In order to create a radial gradient you must set two stop colors.

Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Value:

1. shape Determine the type of circle

ellipse ( Default): Specifies an elliptical radial gradient.
circle: Specify the radial gradient of the circle

##2, size Define the size of the gradient, possible values:

farthest-corner (default): Specify the radius length of the radial gradient from the center of the circle to the corner farthest from the center
closest-side: Specify the radial gradient The radius length is from the center of the circle to the side closest to the center
closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center
farthest-side: Specify the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle

3. Position defines the position of the gradient. Possible values:

center (default): Set the ordinate value in the center of the radial gradient circle.
top: Set the top to be the ordinate value of the center of the radial gradient circle.
bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.

4. start-color, ..., last-color is used to specify the starting and ending colors of the gradient.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3 id="径向渐变">径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

Related recommendations:

CSS tutorial

The above is the detailed content of How to achieve color gradient effect in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

What is CSS flexbox?Apr 30, 2025 pm 03:20 PM

Article discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.

How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PM

The article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework

What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PM

The article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.

How can we animate using CSS?Apr 30, 2025 pm 03:17 PM

Article discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.

Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PM

Article discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)