Home Web Front-end CSS Tutorial How to achieve linear gradient in css3 background

How to achieve linear gradient in css3 background

Dec 22, 2021 am 11:22 AM
css3 linear gradient background

In CSS3, you can use the background attribute and linear-gradient() function to implement background linear gradient, the syntax is "background:linear-gradient(gradient direction, color 1, color 2,...);" .

How to achieve linear gradient in css3 background

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

A gradient is an image that fades smoothly from one color to another, allowing you to show a smooth transition between two or more specified colors. These are often used for subtle coloring in background images, buttons, and many other things.

Gradient specifies the degree of a gradient by defining the start and end points of a gradient line (a gradient line can be geometrically a straight line, a ray, or a spiral, depending on the type of gradient gradient), and then specifying the gradient of points along this line. color. The colors are blended smoothly to fill the rest of the line, and then each type of gradient produces the actual gradient by defining the color of the gradient line using it.

And css3 linear-gradient() can create a linear gradient by specifying the gradient line as a straight line and then placing several colors along the line. We can build an image by creating an infinite canvas and drawing the image using lines perpendicular to the gradient line, with the color of the drawn line being the color of the two intersecting gradient lines. This produces a smooth fade from each color to the next, going in the specified direction.

Syntax for background linear gradient:

background:linear-gradient(direction, color-stop1, color-stop2, ...);
Copy after login
##ValueDescriptionUse the angle value to specify the direction (or angle) of the gradient. is used to specify the starting and ending colors of the gradient.

The first parameter accepted by this function (characteristic) is the angle of the gradient. It can accept a value representing the angle (available units are deg, rad, grad or turn) or keywords indicating direction (top, right, bottom, left, left top, top right, bottom right or left bottom). The second parameter accepts a series of color nodes (the color of the end point).

Gradient container (gradient box)

A gradient image is different from a traditional background image. It has no dimensions (size restrictions). It is unlimited. Then the visible area of ​​the gradient image is determined by the size of the gradient container.

Normally, if you use linear-gradient for a DOM element's background-image or background, its (gradient) display area is The border-box area of ​​the element (if you don’t know the border-box area of ​​the element, it is recommended to read the box-sizing related documents first). In fact, it is also background-color or the display area where the background image is introduced through the url.

However, if you set a size through CSS's background-size, such as 200px * 200px, then the gradient container (gradient size) is background-sizeSet size200px * 200px. When background-position is not set to another value, it defaults to being displayed in the upper left corner of the DOM element (that is, background-position: left top).

In CSS, gradient is background-image of background, that is to say, the CSS properties that are suitable for background images are suitable for gradients.

Gradient line

In a gradient container, the line that connects the center point of the container and the color stop point is called a gradient line. When introducing the knowledge related to gradient angles in the next section, it will help you better understand gradient lines, so we will introduce more details in the next section.

Gradient angle

Obviously, using linear-gradient controls the direction of the gradient through the angle of the gradient. Next let's learn more details about it.

How to achieve linear gradient in css3 background

C point gradient container center point, A is the vertical line passing through C point and passing through CPoint the angle between the gradient lines. This angle is called the gradient angle.

You can define this angle in the following two ways:

  • Use keywords: to top, to bottom ,to left,to right,to top right,to top left,to bottom rightandto bottom left

  • Use numbers with units to define the angle, such as 45deg, 1turn, etc.

If you omit the setting of the angle value, the default is to bottom (corresponding to 180deg or .5turn):

How to achieve linear gradient in css3 background

In the above example, the gradient angle is not set, and the white to red gradient color gradients from top to bottom. It is the same effect as using the to bottom keyword, as shown below:

How to achieve linear gradient in css3 background

The effect of the following two pictures is to use to top and 0deg, and their effects are the same:

How to achieve linear gradient in css3 background

How to achieve linear gradient in css3 background

Another important point about using the top keyword is that it depends on the size of the gradient container, such as to top right (or other corner keywords).

If you want a gradient from red to blue, the direction is to the top right of the element. Logically, the blue should be in the upper right corner of the element, and the purple gradient in the middle should form a straight line from the upper left corner to the lower right corner. As shown in the figure below:

How to achieve linear gradient in css3 background

So to top right does not mean that the gradient line passes through the upper right corner, which means that the gradient angle does not mean 45deg.

That is to say, if linear-gradient uses the top keyword (to top right, to top left, to bottom right and to bottom left), the gradient line first passes through the center point of the element and is connected with The vertices intersect perpendicularly, and the angle formed by the vertical line from the center point is the gradient angle.

Let us see how the gradient line moves when the gradient angle changes dynamically:

How to achieve linear gradient in css3 background

回顾一下渐变角度:

  • 角度是渐变线与渐变容器中心点向上垂直线之间的夹角

  • 0deg的意思就是to top

  • 角度的默认值(也就是角度没有设置),它的值是to bottom,也和180deg相同

  • 顶角关键词和渐变容器尺寸有关

渐变线长度a

之前我们看到渐变色停止分布沿着渐变线是需要解释的一件事情。你可能已经注意到了,在前面的示例中,停止的渐变颜色有时候在渐变容器以外的位置,这看起来有点奇怪,但如果你知道其中的逻辑之后,你就不会这么认为了。先看一下这个示例:

How to achieve linear gradient in css3 background

我们想要一个red至blue的渐变,渐变的角度是45deg,因为渐变容器的比例,渐变线不能通过右上角。但浏览器想要做什么(规范告诉它做什么),能使右上角是blue。

如果我们让渐变线的开始和结束都在渐变容器的边缘,那么blue将会覆盖渐变容器更大的区域,渐变不会有更多的扩散。

因此,为了做到这一点,渐变线有时不得不延长到渐变容器之外。其实很容器知道它的开始和结束位置。通过最近的角落画一条垂直于渐变线的线,与渐变线交叉的地方,就是渐变的开始和结束位置。

事实上,如果W是渐变容器的宽度,H是渐变容器的高度,A是渐变角度,那么渐变线的长度可以通过下面的公式计算:

abs(W * sin(A)) + abs(H * cos(A))
Copy after login

渐变色节点(Color stops)

渐变色的每一个可以这样定义:

<color> [<percentage> | <length>]?
Copy after login

因此不是强制性来指定颜色在渐变线的位置。例如:

How to achieve linear gradient in css3 background

如果没有显式指定颜色在渐变线上的位置,这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色,颜色1将被放置在渐变线0%位置(渐变线开始位置),颜色2将被放置在100%位置处(渐变线的结束点)。如果有三个颜色,那么颜色1在渐变线的0%,颜色2在渐变线的50%,颜色3在渐变线的100%。在上面的这个示例中,有五个颜色,那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。

当然,也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示(相对于渐变线计算),也可以是任何一个CSS长度单位。比如下面这个示例:

How to achieve linear gradient in css3 background

正如你所看到的,五个颜色的每个颜色都有自己的位置,而且是以像素为单位。这些位置从渐变线的开始位置处开始计算。

使用这些位置,你可以想出各种各样的漂亮效果。这样你可以做一个多色渐变:

1How to achieve linear gradient in css3 background

上图中,有七个颜色,其中下一个颜色是在上一个颜色开始位置,这意味弟浏览器不需要填满两个颜色之余间的空间。

当然这样蛮好的也很有趣,如果你把颜色位置配合一起来使用会是什么样的情形。然后让浏览器自动分配你省略的颜色位置。

1How to achieve linear gradient in css3 background

在上面的示例中,第二个颜色orange没有明确的指定其在渐变线上的位置,所以浏览器会自动计算出其位置。它可以根据第一个位置和下一个位置很容易计算出来。但如果有多个颜色没有指定位置,或者前一个或后一个都没有指定位置,那它就变得越来越复杂。

看下面这个示例:

1How to achieve linear gradient in css3 background

在上图中,只有第三个颜色yellow指定了位置,在渐变线的30%处。为了很好的分发,它把第一个颜色red放置在渐变线的0%处,最后一个颜色black放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置,第四个颜色red放置在渐变线30%至100%中间位置。

1How to achieve linear gradient in css3 background

The first and last colors in the above picture are placed at the specified positions of the gradient line, and the remaining colors are evenly distributed between the two.

1How to achieve linear gradient in css3 background

Of course, if it is between 0% and 100%, it is easy for us to control. But there are cases that go beyond this range. For example, in the example above, the last color is at 120% of the gradient line, so the other colors will be evenly distributed based on this position (the default starting position is still 0%, in this example).

If you want to make your browser work more, why can't you specify the position of the colors sequentially on the gradient line? The fact that the color point positions are in accordance with your expected instructions does not prevent you from operating in a non-sequential order. But if the later value is smaller than the previous value, the browser will automatically make corresponding corrections. For example:

1How to achieve linear gradient in css3 background

Let us start with the first color red, which is positioned at 30% of the gradient line, and the second color orange is at 10%, but this is wrong, as said above, the stopping point of the color is an increment. At this time, the browser will correct the position of the second color. It will be the same as the previous color and will also be distributed at 30% of the gradient line. Then the third color yellow is distributed at 60% of the gradient line, but the fourth color blue immediately following it is 40%. The browser will also correct and set its position to be the same as the previous color position.

How to achieve linear gradient in css3 background

Finally, in the above example, the last color blue is in the incorrect position, so the browser will correct its position to be the same as the previous one, in In this case, it is not the adjacent color yellow, nor orange, it will be traced back to the first color red. Therefore, red and blue are both distributed at 30% of the gradient line, so the yellow and orange colors will not be visible.

Tool

The screenshots in the article are all obtained from a simple tool written by Codepen, you can Enter any gradient value in the input box, and you can see the gradient effect as well as the position of the gradient line, gradient angle and gradient color.

Currently this tool still has various flaws and limitations (see comments in JavaScript), so don’t have too high expectations. Of course, you can also improve this tool on this basis to help everyone. Better understand gradients.

How to achieve linear gradient in css3 background

Tool address: https://codepen.io/captainbrosset/pen/ByqRMB

(Learning video sharing: css video tutorial)

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

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

How to set a picture as the background in OneNote How to set a picture as the background in OneNote May 14, 2023 am 11:16 AM

Onenote is one of the best note-taking tools offered by Microsoft. Combined with Outlook and MSTeams, Onenote can be a powerful combination for increasing productivity at work and in personal creative productivity. We have to take notes in a different format, which may be more than just writing things down. Sometimes we need to copy images from different sources and do some editing in our daily work. Images pasted on Onenote can go a long way if you know how to apply the changes. Have you ever encountered a problem when using Onenote that images pasted on Onenote cannot allow you to work easily? This article will look at using images effectively on Onenote. we can

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes! Let's talk about how to cleverly use CSS to add color gradients to ordinary black QR codes! Jul 14, 2022 am 10:34 AM

How to skillfully use CSS to build gradient color QR codes? The following article will introduce to you how to use CSS to add color gradients to ordinary black QR codes. I hope it will be helpful to you!

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

Win11 new version of drawing: remove background with one click to realize cutout function Win11 new version of drawing: remove background with one click to realize cutout function Sep 15, 2023 pm 10:53 PM

Microsoft invites WindowsInsider project members in the Canary and Dev channels to test and experience the new Paint application. The latest version number is 11.2306.30.0. The most noteworthy new feature of this version update is the one-click cutout function. Users only need to click once to automatically eliminate the background and highlight the main body of the picture, making it easier for users to perform subsequent operations. The whole step is very simple. The user imports the picture in the new layout application, and then clicks the "removebackground" button on the toolbar to delete the background in the picture. The user can also use a rectangle to select the area to remove the background.

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

How to change the default picture background when logging in to win7 system How to change the default picture background when logging in to win7 system Jun 30, 2023 pm 04:03 PM

How to change the default picture background when logging in to win7 system? Tutorial sharing on how to change the default picture background when logging in to win7 system. After setting a login password for our computer, when we turn on the computer and go to the login interface, there will be a picture background. Some users want to modify the background, so how can they modify the background? Many friends don’t know how to operate in detail. The editor below has compiled the steps to change the default picture background when logging in to the win7 system. If you are interested, follow the editor and take a look below! Steps to change the default picture background when logging in to the win7 system 1. First, go to the illustrated path C:WindowsSystem32oobeinfoackgrounds

See all articles
direction
color-stop1, color-stop2,...