CSS gradient background is enough for this article

This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

When we design our own web pages, color can be one of the most frustrating parts in order to look good. Especially can’t find some good-looking website on match color again. Today I’m going to record some nice gradient backgrounds, and some commonly used color sites.

CSS gradients enable smooth transitions between two or more specified colors to be displayed. Let’s play around and see what we can do.

CSS defines two types of tween:

Linear gradient (down/up/Left/Right/diagonal)

We define a linear gradient this way with the attribute Linear-gradient.

background-image: linear-gradient(Direction/Angle, color1And the color2And the color3...). ;Copy the code

Direction: Add one or more keywords from top, bottom, right, and left after the keyword to.

Top to bottom (default)

Such as:

background-image: linear-gradient(#FF0000.#FFF200.#1E9600);
Copy the code

From the bottom up

Such as:

background-image: linear-gradient(to top, #FF0000.#FFF200.#1E9600);
Copy the code

From left to right

background-image: linear-gradient(to right, #FF0000.#FFF200.#1E9600);
Copy the code

From right to left

background-image: linear-gradient(to left, #FF0000.#FFF200.#1E9600);
Copy the code

From top left to bottom right

Of course we can use multiple keywords, for example, to bottom right, to end from the top left to the bottom right.

background-image: linear-gradient(to right bottom , #FF0000.#FFF200.#1E9600);
Copy the code

I don’t want to give examples in many directions

Use angles to define direction

In addition to using the keyword to + direction noun, we can also use Angle to specify arbitrarily.

We all know that on a plane the Angle is only 360 degrees, it’s a circle.

Use angles instead of predefined directions (down, up, right, left, down right, and so on). The value of 0deg is equal to up. The value 90deg is equal to to the right. The value 180deg equals to bottom.

We’re filling in the Angle of the end, and the starting point is the Angle of the diagonal

Such as:

background-image: linear-gradient(45deg.#FF0000.#FFF200.#1E9600);
Copy the code

Represents a gradient from 225 degrees to 45 degrees.

Tiled linear gradient

Of course, the color can also use RGB mode, so you can use transparency. Such as:

background-image: linear-gradient(to right, rgba(255.0.0.0), rgba(255.0.0.1));
Copy the code

The repeating-Linear-gradient () function is used to repeat linear gradients for example: Draw a gradient from the bottom left corner, the first 20 pixels are orange, then the first 20 pixels are red, then the next 40 pixels are purple. Once the gradient is drawn, the browser will spread the gradient over the entire background like a tiled image.

background-image: repeating-linear-gradient(45deg.#F27121 20px.#E94057 30px.#8A2387 40px);
Copy the code

Radial gradient (defined by its center)

A radial gradient is one that spreads out along a circle or ellipse. There is a feeling of water spreading.

We go through the radial-gradient(); To define a radial gradient.

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

Shape is oval, size is furthest Angle, and Position is center.

The shape parameter defines the shape. It can accept circle or Ellipse values. The default value is ellipse.

The size parameter defines the size of the gradient. It accepts four values:

Closest side: Closest to the central point with gradual extension. Apsarp-side: Calculate the radius of the circle based on the apsarp-corner: Closest to the center of the gradient Apoaps-corner: The radius of a circle is calculated from the apex Angle farthest from the center of the gradient.

Evenly spaced color code (default)

Such as:

 background-image: radial-gradient(#d63c21.#e0d865);
Copy the code

When I change it to a circle and change it to the right color

background-image: radial-gradient(circle, red, yellow, green);
Copy the code

Sets the center point of the radial gradient

Specify the center position of the gradient with the keyword at followed by the position keyword and value supported by the position attribute.

After adjusting the size and color percentages, for example:

    .item1 {
        height: 150px;
        width: 150px;
        margin-left: 20%;
        background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
    }
Copy the code

Would you ever use a photo of such a beautiful sun? The above example sets the center point at the upper left corner of the element (60% 55%). The radius of the circle is calculated from the vertex Angle farthest from the center of the gradient.

Tiled radial gradient

Such as:

background-image: repeating-radial-gradient(circle at 20% 40%.#eea2a2 20px.#57c6e1 20px.#b49fda 40px.#7ac5d8 40px.#b49fda 60px.#4F9C9C 60px.#57c6e1 80px.#99CCCC 80px.#eea2a2 100px);
Copy the code

Write in the last

That’s all there is to background gradient. If you have a nice gradient effect, please type it in the comments section. Let me see the color scheme for you guys. Let me enjoy it.

CoolHue 2.0 UIGRadients these sites are the ones I use most frequently for color gradients. Everybody has what good website comment section to share.