Gradient advanced guide | using CSS gradient production ramp texture background effect

preface

I have always been interested in gradient background, but I was too busy working overtime every day and had too many tasks. Therefore, I can only study the knowledge of gradient background in my off-duty time, not only to satisfy my curiosity, but also to know more about this aspect of knowledge. Progress with more learning partners and learn new knowledge together. Keep growing, keep improving your knowledge. Those who want to discuss technology and grow together can also add wechat to communicate with each other. In each wechat group, there are many leaders in the front end field. I have learned a lot from them and will try to emulate them in the future. Keep improving yourself. Come on.

CSS radial – gradient () function

Definition and Usage

The radial-gradient() CSS function creates an image. The image consists of a gradual transition between two or more colors emanating from the origin. The shape can be circle or ellipse. Like other gradients, a radial gradient is an image with no fixed size, that is, it does not have a preferred size, nor a preferred scale. The exact size will be determined by the size of the element to which it is applied.

Such as:

1. Two-color circular gradient

background: radial-gradient(#e66465.#9198e5);
Copy the code

According to the closest side of the gradient the edge shape of the gradient is tangent to the side closest to the center of the gradient (circle) or at least to the vertical and horizontal sides closest to the center of the gradient (oval).

background: radial-gradient(closest-side, #3f87a6.#ebf8e1.#f69d3c);
Copy the code

3. Cicle circle gradient

background: radial-gradient(circle at 100%.# 333.# 333 50%.#eee 75%.# 333 75%);
Copy the code

4. The ellipse oval

The composition of the radial gradient

[Explanation] :

A radial gradient is defined by its center point, edge shape outline, and two or more color value end points.
To create a smooth gradient, the radial gradient function draws a series of concentric contours radiating from the center point to the edge shape (and possibly beyond).
The edge shape can be circle or ellipse.
The color end point is located on a virtual gradient ray that extends horizontally to the right from the center point.
The percentage-based color end position is relative to the intersection between the edge shape and this gradient ray (representing 100%).
Each shape is monochrome and is determined by the color on the gradient rays it intersects.

Basic syntax:

radial-gradient([[<shape>||<size>]?[at <position>,]? <color-stop>[,<color-stop>]+)

eg:radial-gradient(circle at center, red 0, blue, green 100%)
Copy the code

[Note] : Gradient is of the image type, so it can be used anywhere that applies to an image. Cannot be used for background-color and other properties such as the color data type.

Configurable parameter

parameter	explain
position	Similar to background-position or transform-origin. If this parameter is not set, the center point is used by default.
shape	Gradient shape. A circle (the shape of a gradient is a perfect circle with constant radius) or an ellipse (an axisymmetric ellipse). The default value is ellipse
size	The size of the gradient
color-stop	Represents a fixed color value at a certain position, including a color value plus an optional position value (the percentage or length value relative to the virtual gradient ray). The percentage value of 0%, or the length value of 0, represents the gradient center; The percentage value of 100% represents the point at which the gradient ray intersects the edge shape. The percentage values in between correspond linearly to the points on the gradient ray.
extent-keyword	The keyword describes the location of the edge contour.

MND- Linear-gradient () : Linear-gradient

Radial gradient demonstration

X-axis :left: 0% Center: 50% Right: 100%
Y axis :top 0%, center: 50%, bottom: 100%

Online display address

The numerical

Value: The X-axis value represents the offset from 0 (upper left corner of the gradient box) on the X-axis. The Y-axis value represents the offset from 0 on the Y-axis.

Online display address

The percentage of the X-axis is relative to the width of the gradient box, and the percentage of the Y-axis is relative to the height of the gradient box. The width of the gradient box is determined by background-size.

Online display address

A single value

When there is only one value, the default second value is center.

Online display address

Shape shape

Define the shape of a gradient as a circle or ellipse. The default is ellipse.

Online display address

Among other keyword description

constant	describe	usage
closest-side	The edge shape of the gradient is tangent to the side of the container closest to the center of the gradient (circle) or at least to the vertical and horizontal sides closest to the center of the gradient (ellipse).	background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
closest-corner	The edge shape of the gradient intersects the Angle of the container closest to the center of the gradient.	background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
farthest-side	In contrast to closest side, the edge shape is tangent to the side of the container furthest from the center of the gradient (or the vertical and horizontal sides furthest).	background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
farthest-corner	The edge shape of the gradient intersects the corner of the container farthest from the center of the gradient.	background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

Online display address

Linear gradient color scale

The same part of the color scale as the linear gradient is no longer repeated, only the different parts are shown here. Since positions at 100% of the color mark do not fill the gradient area, the browser defaults to using the color of the last color mark to fill the gradient area.

Online display address

Repeating-radial -gradient Repeat gradient

The CSS function repeating-resort-gradient creates an image composed of repeated gradients radiating from the origin.
It is similar to a radial-gradient and takes the same parameters, but it repeats the color in all directions to cover its entire container.
The result of the function is an object of type gradient, which is a special type of image.

The sample

/* A repeated gradient from the center of the container, starting with red, then blue, then green */
repeating-radial-gradient(circle at center, red 0, blue, green 30px);
Copy the code

For each iteration, the offset of the color label position is a multiple of the base gradient length (the distance between the last color label and the first one).
The color value of the final color mark should be the same as that of the first color mark. If inconsistent, this can result in a very abrupt gradient effect.
It has no original or preferred size, and no preferred ratio column. It ADAPTS to the size of the corresponding element.

[Note] : Other parameters are used in accordance with the radial-gradient(). Refer to the above introduction.

Radial gradient repetition

Repeat gradient can achieve radial gradient repetition effect, so that the color code in the ellipse direction infinite repetition, to achieve some special effects.
Repeat gradients only work if the top and bottom colors are not at 0% or 100%.

background-image: -webkit-repeating-radial-gradient(blue 20%,green 50%);
background-image: repeating-radial-gradient(blue 20%,green 50%);
Copy the code

Online display address

Linear-gradient () linear gradient

The CSS Linear-gradient () function is used to create an image that represents a linear gradient of two or more colors. The result belongs to the gradient data type, which is a special image data type.

Online display address

Linear gradient composition

The color value of the gradient line is defined by different points, including the start point, the end point, and optional intermediate points between the two (there can be multiple intermediate points).
The starting point is the point on the gradient line that represents the starting color value. The starting point is defined by the intersection between the gradient line and the vertical line that crosses the vertex of the container. (The vertical line is in the same quadrant as the gradient)
The endpoint is also defined by the intersection between the gradient line and the vertical line emanating from the nearest vertex.
Points near the starting point have the same color value as the starting point, and points near the end point have the same color value as the end point.

The sample code

linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
linear-gradient(red 10%.30%, blue 90%);
linear-gradient(red 40%, yellow 30%, blue 65%);
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
Copy the code

Use the syntax

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ] #, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1.2}
  and <color-hint> = [ <percentage> | <length> ]
Copy the code

MND- Linear-gradient () : Linear-gradient

Colorful textured background

1. Halo effect

background: 
radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.15) 30%.rgba(255.255.255.3) 32%.rgba(255.255.255.0) 33%) 0 0.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.1) 11%.rgba(255.255.255.3) 13%.rgba(255.255.255.0) 14%) 0 0.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 17%.rgba(255.255.255.43) 19%.rgba(255.255.255.0) 20%) 0 110px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 11%.rgba(255.255.255.4) 13%.rgba(255.255.255.0) 14%) -130px -170px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 11%.rgba(255.255.255.4) 13%.rgba(255.255.255.0) 14%) 130px 370px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.1) 11%.rgba(255.255.255.2) 13%.rgba(255.255.255.0) 14%) 0 0.linear-gradient(45deg.# 343702 0%.# 184500 20%.# 187546 30%.# 006782 40%.#0b1284 50%.#760ea1 60%.#83096e 70%.#840b2a 80%.#b13e12 90%.#e27412 100%);
background-size: 470px 470px.970px 970px.410px 410px.610px 610px.530px 530px.730px 730px.100% 100%;
background-color: #840b2a;
Copy the code

2. Starry sky effect

background-color:black;
background-image:
radial-gradient(white, rgba(255.255.255.2) 2px, transparent 40px),
radial-gradient(white, rgba(255.255.255.15) 1px, transparent 30px),
radial-gradient(white, rgba(255.255.255.1) 2px, transparent 40px),
radial-gradient(rgba(255.255.255.4), rgba(255.255.255.1) 2px, transparent 30px);
background-size: 550px 550px.350px 350px.250px 250px.150px 150px; 
background-position: 0 0.40px 60px.130px 270px.70px 100px;
Copy the code

3. Love tablecloth effect

background: 
radial-gradient(circle closest-side at 60% 43%.#b03 26%.rgba(187.0.51.0) 27%),
radial-gradient(circle closest-side at 40% 43%.#b03 26%.rgba(187.0.51.0) 27%),
radial-gradient(circle closest-side at 40% 22%.#d35 45%.rgba(221.51.85.0) 46%),
radial-gradient(circle closest-side at 60% 22%.#d35 45%.rgba(221.51.85.0) 46%),
radial-gradient(circle closest-side at 50% 35%.#d35 30%.rgba(221.51.85.0) 31%),

radial-gradient(circle closest-side at 60% 43%.#b03 26%.rgba(187.0.51.0) 27%) 50px 50px.radial-gradient(circle closest-side at 40% 43%.#b03 26%.rgba(187.0.51.0) 27%) 50px 50px.radial-gradient(circle closest-side at 40% 22%.#d35 45%.rgba(221.51.85.0) 46%) 50px 50px.radial-gradient(circle closest-side at 60% 22%.#d35 45%.rgba(221.51.85.0) 46%) 50px 50px.radial-gradient(circle closest-side at 50% 35%.#d35 30%.rgba(221.51.85.0) 31%) 50px 50px;
background-color:#b03;
background-size:100px 100px;
Copy the code

4. Wall brick effect

background-color: silver;
background-image: linear-gradient(335deg.#b00 23px, transparent 23px),
linear-gradient(155deg.#d00 23px, transparent 23px),
linear-gradient(335deg.#b00 23px, transparent 23px),
linear-gradient(155deg.#d00 23px, transparent 23px);
background-size: 58px 58px; 
background-position: 0px 2px.4px 35px.29px 31px.34px 6px;
Copy the code

5. Striped tablecloth effect

background-color: hsl(2.57%.40%);
background-image: repeating-linear-gradient(transparent, transparent 50px.rgba(0.0.0.4) 50px.rgba(0.0.0.4) 53px, 
transparent 53px, transparent 63px.rgba(0.0.0.4) 63px.rgba(0.0.0.4) 66px, transparent 66px, transparent 116px.rgba(0.0.0.5) 116px.rgba(0.0.0.5) 166px.rgba(255.255.255.2) 166px.rgba(255.255.255.2) 169px.rgba(0.0.0.5) 169px.rgba(0.0.0.5) 179px.rgba(255.255.255.2) 179px.rgba(255.255.255.2) 182px.rgba(0.0.0.5) 182px.rgba(0.0.0.5) 232px, transparent 232px),
repeating-linear-gradient(270deg, transparent, transparent 50px.rgba(0.0.0.4) 50px.rgba(0.0.0.4) 53px, 
transparent 53px, transparent 63px.rgba(0.0.0.4) 63px.rgba(0.0.0.4) 66px, transparent 66px, transparent 116px.rgba(0.0.0.5) 116px.rgba(0.0.0.5) 166px.rgba(255.255.255.2) 166px.rgba(255.255.255.2) 169px.rgba(0.0.0.5) 169px.rgba(0.0.0.5) 179px.rgba(255.255.255.2) 179px.rgba(255.255.255.2) 182px.rgba(0.0.0.5) 182px.rgba(0.0.0.5) 232px, transparent 232px),
repeating-linear-gradient(125deg, transparent, transparent 2px.rgba(0.0.0.2) 2px.rgba(0.0.0.2) 3px, 
transparent 3px, transparent 5px.rgba(0.0.0.2) 5px);
Copy the code

6. Cute round table effect

background-color:white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),        
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
background-size: 30px 30px.90px 90px; 
background-position: 0 0;
Copy the code

7. Flash background

background: repeating-conic-gradient(rgb(255.255.255), rgb(109.241.76), rgb(255.255.255) 0.8 deg);
Copy the code

8. Unequal background stripes

  background: linear-gradient(#78C9DB 70%.#0acf00 0%);
  background-size: 100%  20px;
Copy the code

9. Tile stripe background

background:linear-gradient(45deg.#78C9DB 50%.#0acf00 50%);
background-size:30px 30px;
Copy the code

10. Grass effect

background:linear-gradient(-45deg.#0acf00 50%.#78C9DB 50%);
background-size:30px 100%;
Copy the code

11. Diagonal stripe background

  background:linear-gradient(-45deg.#0acf00 25%.#78C9DB 0.#78C9DB 50%.#0acf00 0.#0acf00 75%.#78C9DB 0);
background-size: 30px 30px;
Copy the code

12. Monochrome diagonal stripe background (using transparency and transparent)

background:#fff repeating-linear-gradient(30deg.rgba(0.0.0.5),rgba(0.0.0.5)15px,transparent 0,transparent 30px);
Copy the code

13. Plaid texture

background:#fff;
background: linear-gradient(90deg.rgba(100.0.0.5) 50%,transparent 0),linear-gradient(rgba(100.0.0.5) 50%,transparent 0);
background-size: 30px 30px;
Copy the code

14. Wave point background

background:#a95f44;
background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
background-size:20px 20px;
background-position:0 0.10px 10px; / / must bebackground-sizeThe size of the1/2
Copy the code

15. Checkerboard background

background: #fff;
background-image:linear-gradient(45deg.#a95f44  26%,transparent 0,transparent 75%.#a95f44  0),
linear-gradient(45deg.#a95f44  26%,transparent 0,transparent 75%.#a95f44 0);
background-size:30px 30px;
background-position:0 0.15px 15px;
Copy the code

16. Rose violet

background-image: linear-gradient(90deg.rgba(50.0.0.0.05) 3%.rgba(0.0.0.0) 3%), linear-gradient(360deg.rgba(50.0.0.0.05) 3%.rgba(0.0.0.0) 3%);
background-size: 20px 20px;
background-position: center center;
Copy the code

17. All stack blue

background-image: linear-gradient(90deg.rgba(50.0.0.0.04) 3%.rgba(0.0.0.0) 3%), linear-gradient(360deg.rgba(50.0.0.0.04) 3%.rgba(0.0.0.0) 3%);
background-size: 20px 20px;
background-position: center center;
Copy the code

18. Multiple angular gradients

background: repeating-conic-gradient(#fff.# 000.#fff 30deg);
Copy the code

19. Flash texture

background: repeating-conic-gradient(#fff.# 000.#fff 0.1 deg);
Copy the code

20. Pink tree ring texture

 background-image: repeating-radial-gradient(
      circle at center center,
      rgb(241.43.239),
      rgb(239.246.244) 3px
  );
Copy the code

21. Blue scrub

  background-image: repeating-radial-gradient(
      ellipse at center center,
      rgb(75.154.242),
      rgb(64.135.228),
      rgb(54.117.214),
      rgb(43.98.200),
      rgb(33.79.185),
      rgb(22.60.171),
      rgb(12.42.157),
      rgb(1.23.143) 0.01 px.
  );
Copy the code

22. Two-tone stripes

  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0.0 100%.color-stop(.5.rgba(255.255.255.2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-size: 50px 50px;
  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;
Copy the code

23. Two-tone yellow stripes

  background-color: #f90;
  background-image: -webkit-gradient(linear, 0 0.100% 0.color-stop(.5.rgba(255.255.255.2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg.rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg.rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg.rgba(255.255.255.2) 50%, transparent 50%, transparent);
  background-size: 50px 50px;
  -moz-box-shadow: 1px 1px 8px gray;
  -webkit-box-shadow: 1px 1px 8px gray;
  box-shadow: 1px 1px 8px gray;
Copy the code

24. The pink

  background-color: white;
background-image: -webkit-gradient(linear, 0 0.0 100%.color-stop(.5, transparent), color-stop(.5.rgba(200.0.0.5)), to(rgba(200.0.0.5))), -webkit-gradient(linear, 0 0.100% 0.color-stop(.5, transparent), color-stop(.5.rgba(200.0.0.5)), to(rgba(200.0.0.5)));
background-image: -moz-linear-gradient(transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5)), -moz-linear-gradient(0deg, transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5));
background-image: -o-linear-gradient(transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5)), -o-linear-gradient(0deg, transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5));
background-image: linear-gradient(transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5)), linear-gradient(0deg, transparent 50%.rgba(200.0.0.5) 50%.rgba(200.0.0.5));
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
Copy the code

25. Double green

background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%.100% 0.color-stop(.25.rgba(255.255.255.2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5.rgba(255.255.255.2)), color-stop(.75.rgba(255.255.255.2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
Copy the code

26. Red bicolor

background-color: #c16;
background-image: -webkit-gradient(linear, 0 0.100% 100%.color-stop(.25.rgba(255.255.255.2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5.rgba(255.255.255.2)), color-stop(.75.rgba(255.255.255.2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg.rgba(255.255.255.2) 25%, transparent 25%, transparent 50%.rgba(255.255.255.2) 50%.rgba(255.255.255.2) 75%, transparent 75%, transparent);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
Copy the code

27. The black and white pieces

background-image: -webkit-gradient(linear, 0 0.100% 100%.color-stop(.25.# 555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%.100% 0.color-stop(.25.# 555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0.100% 100%.color-stop(.75, transparent), color-stop(.75.# 555)), -webkit-gradient(linear, 0 100%.100% 0.color-stop(.75, transparent), color-stop(.75.# 555));
background-image: -moz-linear-gradient(45deg.# 555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg.# 555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%.# 555 75%), -moz-linear-gradient(-45deg, transparent 75%.# 555 75%);
background-image: -o-linear-gradient(45deg.# 555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg.# 555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%.# 555 75%), -o-linear-gradient(-45deg, transparent 75%.# 555 75%);
background-image: linear-gradient(45deg.# 555 25%, transparent 25%, transparent), linear-gradient(-45deg.# 555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%.# 555 75%), linear-gradient(-45deg, transparent 75%.# 555 75%);
background-size: 50px 50px;
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
Copy the code

28. Copper coin texture

background-color: #ddeeff;
background-image: radial-gradient(closest-side,transparent 98%.rgba(0.0.0.0.3) 99%),radial-gradient(closest-side,transparent 98%.rgba(0.0.0.0.3) 99%);
background-position: 0 0.40px 40px;
background-size: 80px 80px;
Copy the code

29. Red and white

background: white;
background-image: linear-gradient(90deg.rgba(200.0.0.0.5) 50%, transparent 0), linear-gradient(rgba(200.0.0.0.5) 50%, transparent 0);
background-size: 30px 30px;
Copy the code

30. The blue line

background: #58a;
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
Copy the code

31. Loose blue stripe

background: #58a;
background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0), linear-gradient(rgba(255.255.255.0.3) 1px, transparent 0), linear-gradient(90deg.rgba(255.255.255.0.3) 1px, transparent 0);
background-size: 75px 75px.75px 75px.15px 15px.15px 15px;
Copy the code

32. Some texture

background: # 655;
background-image: radial-gradient(#d2b48c 20%.rgba(0.0.0.0) 0%);
background-size: 30px 30px;
Copy the code

33. Coarse texture

background: # 655;
background-image: radial-gradient(#d2b48c 20%.rgba(0.0.0.0) 0%), radial-gradient(#d2b48c 20%.rgba(0.0.0.0) 0%);
background-size: 30px 30px;
background-position: 0 0.15px 15px;
Copy the code

34. Fine texture

background: # 655;
background-image: radial-gradient(#d2b48c 10%.rgba(0.0.0.0) 0%), radial-gradient(#d2b48c 10%.rgba(0.0.0.0) 0%);
background-size: 30px 30px;
background-position: 0 0.15px 15px;
Copy the code

34. White grid

  background: #eee;
  background-image: linear-gradient(45deg.#bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%.#bbb 0);
  background-position: 0 0.15px 15px;
  background-size: 30px 30px;
Copy the code

35. The Mosaic

  background: #eee;
  background-image: linear-gradient(45deg.#bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%.#bbb 0), linear-gradient(45deg.#bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%.#bbb 0);
  background-position: 0 0.15px 15px.15px 15px.30px 30px;
  background-size: 30px 30px;
Copy the code

36. Bold mosaics

  background: #eee;
  background-image: linear-gradient(45deg.#bbb 25%, transparent 0, transparent 75%.#bbb 0), linear-gradient(45deg.#bbb 25%, transparent 0, transparent 75%.#bbb 0);
  background-position: 0 0.15px 15px;
  background-size: 30px 30px;
Copy the code

37. Red hager

  background: black;
  background-image: linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0), linear-gradient(45deg, red 25%, transparent 0, transparent 75%, red 0);
  background-position: 0 0.20px 20px;
  background-size: 40px 40px;
Copy the code

38. Light Mosaic

  background: #eee url('data:image/svg+xml, 
      ');
  background-size: 30px 30px;
Copy the code

39. Four-color texture

  background: linear-gradient(90deg.#fb3 15%.# 655 0.# 655 40%.#ab4 0.#ab4 65%.#f0e2db 0);
  background-size: 80px 100%;
Copy the code

40. Lovely texture

  background: radial-gradient(circle at 0% 50%.rgba(96.16.48.0) 9px.# 613 10px.rgba(96.16.48.0) 11px) 0px 10px.radial-gradient(at 100% 100%.rgba(96.16.48.0) 9px.# 613 10px.rgba(96.16.48.0) 11px), #8a3;
  background-size: auto, auto, auto;
background-size: 20px 20px;
Copy the code

41. Circuit texture

  background: linear-gradient(63deg.# 999 23%, transparent 23%) 7px 0.linear-gradient(63deg, transparent 74%.# 999 78%), linear-gradient(63deg, transparent 34%.# 999 38%.# 999 58%, transparent 62%), # 444;
  background-size: auto, auto, auto, auto;
background-size: 16px 48px;
Copy the code

42. Triangular texture

  background: #36c;
background: linear-gradient(115deg, transparent 75%.rgba(255.255.255.8) 75%) 0 0.linear-gradient(245deg, transparent 75%.rgba(255.255.255.8) 75%) 0 0.linear-gradient(115deg, transparent 75%.rgba(255.255.255.8) 75%) 7px -15px.linear-gradient(245deg, transparent 75%.rgba(255.255.255.8) 75%) 7px -15px.#36c;
  background-size: auto, auto, auto, auto, auto;
background-size: 15px 30px;
Copy the code

43. Arrow texture

  background: linear-gradient(45deg.#92baac 45px, transparent 45px)64px 64px.linear-gradient(45deg.#92baac 45px, transparent 45px,transparent 91px.#e1ebbd 91px.#e1ebbd 135px, transparent 135px), linear-gradient(-45deg.#92baac 23px, transparent 23px, transparent 68px.#92baac 68px.#92baac 113px,transparent 113px,transparent 158px.#92baac 158px);
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto;
background-color: #e1ebbd;
background-size: 128px 128px;
Copy the code

44. Pipe texture

  background: linear-gradient(135deg.#ECEDDC 25%, transparent 25%) -50px 0.linear-gradient(225deg.#ECEDDC 25%, transparent 25%) -50px 0.linear-gradient(315deg.#ECEDDC 25%, transparent 25%), linear-gradient(45deg.#ECEDDC 25%, transparent 25%);
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto;
background-size: 100px 100px;
background-color: #EC173A;
Copy the code

45. Manhole cover texture

  background: linear-gradient(135deg.# 708090 21px.#d9ecff 22px.#d9ecff 24px, transparent 24px, transparent 67px.#d9ecff 67px.#d9ecff 69px, transparent 69px), linear-gradient(225deg.# 708090 21px.#d9ecff 22px.#d9ecff 24px, transparent 24px, transparent 67px.#d9ecff 67px.#d9ecff 69px, transparent 69px)0 64px;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto;
background-color: # 708090;
background-size: 64px 128px;
Copy the code

46. Mesh texture

  background: radial-gradient(hsl(0.100%.27%) 4%.hsl(0.100%.18%) 9%.hsla(0.100%.20%.0) 9%) 0 0.radial-gradient(hsl(0.100%.27%) 4%.hsl(0.100%.18%) 8%.hsla(0.100%.20%.0) 10%) 50px 50px.radial-gradient(hsla(0.100%.30%.0.8) 20%.hsla(0.100%.20%.0)) 50px 0.radial-gradient(hsla(0.100%.30%.0.8) 20%.hsla(0.100%.20%.0)) 0 50px.radial-gradient(hsla(0.100%.20%.1) 35%.hsla(0.100%.20%.0) 60%) 50px 0.radial-gradient(hsla(0.100%.20%.1) 35%.hsla(0.100%.20%.0) 60%) 100px 50px.radial-gradient(hsla(0.100%.15%.0.7), hsla(0.100%.20%.0)) 0 0.radial-gradient(hsla(0.100%.15%.0.7), hsla(0.100%.20%.0)) 50px 50px.linear-gradient(45deg.hsla(0.100%.20%.0) 49%.hsla(0.100%.0%.1) 50%.hsla(0.100%.20%.0) 70%) 0 0.linear-gradient(-45deg.hsla(0.100%.20%.0) 49%.hsla(0.100%.0%.1) 50%.hsla(0.100%.20%.0) 70%) 0 0;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
background-color: # 300;
background-size: 100px 100px;
Copy the code

47. Night sky texture

  background-color: black;
background-image: radial-gradient(white, rgba(255.255.255.2) 2px, transparent 40px), radial-gradient(white, rgba(255.255.255.15) 1px, transparent 30px), radial-gradient(white, rgba(255.255.255.1) 2px, transparent 40px), radial-gradient(rgba(255.255.255.4), rgba(255.255.255.1) 2px, transparent 30px);
background-size: 550px 550px.350px 350px.250px 250px.150px 150px;
background-position: 0 0.40px 60px.130px 270px.70px 100px;
Copy the code

48. Alarm clock textures

  background-color: white;
background-image: radial-gradient(midnightblue 9px, transparent 10px), repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
background-size: 30px 30px.90px 90px;
background-position: 0 0;
Copy the code

49. Bubble texture

  background: radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.15) 30%.rgba(255.255.255.3) 32%.rgba(255.255.255.0) 33%) 0 0.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.1) 11%.rgba(255.255.255.3) 13%.rgba(255.255.255.0) 14%) 0 0.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 17%.rgba(255.255.255.43) 19%.rgba(255.255.255.0) 20%) 0 110px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 11%.rgba(255.255.255.4) 13%.rgba(255.255.255.0) 14%) -130px -170px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.2) 11%.rgba(255.255.255.4) 13%.rgba(255.255.255.0) 14%) 130px 370px.radial-gradient(rgba(255.255.255.0) 0.rgba(255.255.255.1) 11%.rgba(255.255.255.2) 13%.rgba(255.255.255.0) 14%) 0 0.linear-gradient(45deg.# 343702 0%.# 184500 20%.# 187546 30%.# 006782 40%.#0b1284 50%.#760ea1 60%.#83096e 70%.#840b2a 80%.#b13e12 90%.#e27412 100%);
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto, auto, auto, auto;
background-size: 470px 470px.970px 970px.410px 410px.610px 610px.530px 530px.730px 730px.100% 100%;
background-color: #840b2a;
Copy the code

50. Speaker texture

  background: radial-gradient(black 15%, transparent 16%) 0 0.radial-gradient(black 15%, transparent 16%) 8px 8px.radial-gradient(rgba(255.255.255.1) 15%, transparent 20%) 0 1px.radial-gradient(rgba(255.255.255.1) 15%, transparent 20%) 8px 9px;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto;
background-color: # 282828;
background-size: 16px 16px;
Copy the code

51. Love

  background: radial-gradient(circle closest-side at 60% 43%.#b03 26%.rgba(187.0.51.0) 27%), radial-gradient(circle closest-side at 40% 43%.#b03 26%.rgba(187.0.51.0) 27%), radial-gradient(circle closest-side at 40% 22%.#d35 45%.rgba(221.51.85.0) 46%), radial-gradient(circle closest-side at 60% 22%.#d35 45%.rgba(221.51.85.0) 46%), radial-gradient(circle closest-side at 50% 35%.#d35 30%.rgba(221.51.85.0) 31%), radial-gradient(circle closest-side at 60% 43%.#b03 26%.rgba(187.0.51.0) 27%) 50px 50px.radial-gradient(circle closest-side at 40% 43%.#b03 26%.rgba(187.0.51.0) 27%) 50px 50px.radial-gradient(circle closest-side at 40% 22%.#d35 45%.rgba(221.51.85.0) 46%) 50px 50px.radial-gradient(circle closest-side at 60% 22%.#d35 45%.rgba(221.51.85.0) 46%) 50px 50px.radial-gradient(circle closest-side at 50% 35%.#d35 30%.rgba(221.51.85.0) 31%) 50px 50px;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
background-color: #b03;
background-size: 100px 100px;
Copy the code

52. The diamond

  background-color: #6d695c;
background-image: repeating-linear-gradient(120deg.rgba(255.255.255.1), rgba(255.255.255.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg.rgba(255.255.255.1), rgba(255.255.255.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg.rgba(0.0.0.1) 25%, transparent 25%, transparent 75%.rgba(0.0.0.1) 75%.rgba(0.0.0.1)), linear-gradient(120deg.rgba(0.0.0.1) 25%, transparent 25%, transparent 75%.rgba(0.0.0.1) 75%.rgba(0.0.0.1));
background-size: 70px 120px;
Copy the code

53. Wavy texture

background-color: #FF7D9D;
background-size: 58px 58px;
background-position: 0px 2px.4px 35px.29px 31px.33px 6px.0px 36px.4px 2px.29px 6px.33px 30px;
background-image: linear-gradient(335deg.#C90032 23px, transparent 23px), linear-gradient(155deg.#C90032 23px, transparent 23px), linear-gradient(335deg.#C90032 23px, transparent 23px), linear-gradient(155deg.#C90032 23px, transparent 23px), linear-gradient(335deg.#C90032 10px, transparent 10px), linear-gradient(155deg.#C90032 10px, transparent 10px), linear-gradient(335deg.#C90032 10px, transparent 10px), linear-gradient(155deg.#C90032 10px, transparent 10px);
Copy the code

54. Pipe texture

background: radial-gradient(circle at 100% 50%, transparent 20%.rgba(255.255.255.3) 21%.rgba(255.255.255.3) 34%, transparent 35%, transparent), radial-gradient(circle at 0% 50%, transparent 20%.rgba(255.255.255.3) 21%.rgba(255.255.255.3) 34%, transparent 35%, transparent) 0 -50px;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto;
background-color: slategray;
background-size: 75px 100px;
Copy the code

55. Manhole cover texture

background: radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px.linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px.linear-gradient(90deg.#A8B1BB 8px, transparent 8px) -4px 0;
background-color: rgba(0.0.0.0);
background-size: auto, auto, auto, auto;
background-color: slategray;
background-size: 100px 100px.100px 100px.50px 50px.50px 50px;
Copy the code

56. Gossip texture

background: radial-gradient(circle at 50% 59%.#D2CAAB 3%.#364E27 4%.#364E27 11%.rgba(54.78.39.0) 12%.rgba(54.78.39.0)) 50px 0.radial-gradient(circle at 50% 41%.#364E27 3%.#D2CAAB 4%.#D2CAAB 11%.rgba(210.202.171.0) 12%.rgba(210.202.171.0)) 50px 0.radial-gradient(circle at 50% 59%.#D2CAAB 3%.#364E27 4%.#364E27 11%.rgba(54.78.39.0) 12%.rgba(54.78.39.0)) 0 50px.radial-gradient(circle at 50% 41%.#364E27 3%.#D2CAAB 4%.#D2CAAB 11%.rgba(210.202.171.0) 12%.rgba(210.202.171.0)) 0 50px.radial-gradient(circle at 100% 50%.#D2CAAB 16%.rgba(210.202.171.0) 17%), radial-gradient(circle at 0% 50%.#364E27 16%.rgba(54.78.39.0) 17%), radial-gradient(circle at 100% 50%.#D2CAAB 16%.rgba(210.202.171.0) 17%) 50px 50px.radial-gradient(circle at 0% 50%.#364E27 16%.rgba(54.78.39.0) 17%) 50px 50px;
background-color: rgba(0.0.0.0);
background-size: auto, auto, auto, auto, auto, auto, auto, auto;
background-color: #63773F;
background-size: 100px 100px;
Copy the code

57. Star texture

background: linear-gradient(324deg.# 232927 4%, transparent 4%) -70px 43px.linear-gradient( 36deg.# 232927 4%, transparent 4%) 30px 43px.linear-gradient( 72deg.#e3d7bf 8.5%, transparent 8.5%) 30px 43px.linear-gradient(288deg.#e3d7bf 8.5%, transparent 8.5%) -70px 43px.linear-gradient(216deg.#e3d7bf 7.5%, transparent 7.5%) -70px 23px.linear-gradient(144deg.#e3d7bf 7.5%, transparent 7.5%) 30px 23px.linear-gradient(324deg.# 232927 4%, transparent 4%) -20px 93px.linear-gradient( 36deg.# 232927 4%, transparent 4%) 80px 93px.linear-gradient( 72deg.#e3d7bf 8.5%, transparent 8.5%) 80px 93px.linear-gradient(288deg.#e3d7bf 8.5%, transparent 8.5%) -20px 93px.linear-gradient(216deg.#e3d7bf 7.5%, transparent 7.5%) -20px 73px.linear-gradient(144deg.#e3d7bf 7.5%, transparent 7.5%) 80px 73px;
  background-color: rgba(0.0.0.0);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
background-color: # 232927;
background-size: 100px 100px;
Copy the code

58. Large copper coin texture

background-image: radial-gradient(closest-side, transparent 0%, transparent 75%.#B6CC66 76%.#B6CC66 85%.#EDFFDB 86%.#EDFFDB 94%.#FFFFFF 95%.#FFFFFF 103%.#D9E6A7 104%.#D9E6A7 112%.#798B3C 113%.#798B3C 121%.#FFFFFF 122%.#FFFFFF 130%.#E0EAD7 131%.#E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%.#B6CC66 76%.#B6CC66 85%.#EDFFDB 86%.#EDFFDB 94%.#FFFFFF 95%.#FFFFFF 103%.#D9E6A7 104%.#D9E6A7 112%.#798B3C 113%.#798B3C 121%.#FFFFFF 122%.#FFFFFF 130%.#E0EAD7 131%.#E0EAD7 140%);
background-size: 110px 110px;
background-color: #C8D3A7;
background-position: 0 0.55px 55px;
Copy the code

59. Copper coin texture

background-color: #def;
background-image: radial-gradient(closest-side, transparent 98%.rgba(0.0.0.3) 99%), radial-gradient(closest-side, transparent 98%.rgba(0.0.0.3) 99%);
background-size: 80px 80px;
background-position: 0 0.40px 40px;
Copy the code

60. Wall tile texture

background-color: silver;
background-image: linear-gradient(335deg.#b00 23px, transparent 23px), linear-gradient(155deg.#d00 23px, transparent 23px), linear-gradient(335deg.#b00 23px, transparent 23px), linear-gradient(155deg.#d00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px.4px 35px.29px 31px.34px 6px;
Copy the code

60. Wall tile texture

background-color: silver;
background-image: radial-gradient(circle at 100% 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 10%, silver 23%, white 23%, white 30%, silver 30%, silver 43%, white 43%, white 50%, silver 50%, silver 63%, white 63%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent), radial-gradient(circle at 0 50%, white 5%, silver 5%, silver 15%, white 15%, white 20%, silver 20%, silver 29%, white 29%, white 34%, silver 34%, silver 44%, white 44%, white 49%, transparent 49%, transparent);
background-size: 100px 50px;
Copy the code

61. Block texture

background-color: # 556;
background-image: linear-gradient(30deg.# 445 12%, transparent 12.5%, transparent 87%.# 445 87.5%.# 445), linear-gradient(150deg.# 445 12%, transparent 12.5%, transparent 87%.# 445 87.5%.# 445), linear-gradient(30deg.# 445 12%, transparent 12.5%, transparent 87%.# 445 87.5%.# 445), linear-gradient(150deg.# 445 12%, transparent 12.5%, transparent 87%.# 445 87.5%.# 445), linear-gradient(60deg.#99a 25%, transparent 25.5%, transparent 75%.#99a 75%.#99a), linear-gradient(60deg.#99a 25%, transparent 25.5%, transparent 75%.#99a 75%.#99a);
background-size: 80px 140px;
background-position: 0 0.0 0.40px 70px.40px 70px.0 0.40px 70px;
Copy the code

62. Black and white dot texture

  background-color: # 001;
background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
background-position: 0 0.30px 30px;
Copy the code

63. The black and white pieces

  background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0.30px 30px;
Copy the code

64. Black and white square texture

background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
Copy the code

65. Fabric texture

background-color: hsl(2.57%.40%);
background-image: repeating-linear-gradient(transparent, transparent 50px.rgba(0.0.0.4) 50px.rgba(0.0.0.4) 53px, transparent 53px, transparent 63px.rgba(0.0.0.4) 63px.rgba(0.0.0.4) 66px, transparent 66px, transparent 116px.rgba(0.0.0.5) 116px.rgba(0.0.0.5) 166px.rgba(255.255.255.2) 166px.rgba(255.255.255.2) 169px.rgba(0.0.0.5) 169px.rgba(0.0.0.5) 179px.rgba(255.255.255.2) 179px.rgba(255.255.255.2) 182px.rgba(0.0.0.5) 182px.rgba(0.0.0.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px.rgba(0.0.0.4) 50px.rgba(0.0.0.4) 53px, transparent 53px, transparent 63px.rgba(0.0.0.4) 63px.rgba(0.0.0.4) 66px, transparent 66px, transparent 116px.rgba(0.0.0.5) 116px.rgba(0.0.0.5) 166px.rgba(255.255.255.2) 166px.rgba(255.255.255.2) 169px.rgba(0.0.0.5) 169px.rgba(0.0.0.5) 179px.rgba(255.255.255.2) 179px.rgba(255.255.255.2) 182px.rgba(0.0.0.5) 182px.rgba(0.0.0.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px.rgba(0.0.0.2) 2px.rgba(0.0.0.2) 3px, transparent 3px, transparent 5px.rgba(0.0.0.2) 5px);
Copy the code

65. Wallpaper texture

background-color: hsl(34.53%.82%);
background-image: repeating-linear-gradient(45deg, transparent 5px.hsla(197.62%.11%.0.5) 5px.hsla(197.62%.11%.0.5) 10px.hsla(5.53%.63%.0) 10px.hsla(5.53%.63%.0) 35px.hsla(5.53%.63%.0.5) 35px.hsla(5.53%.63%.0.5) 40px.hsla(197.62%.11%.0.5) 40px.hsla(197.62%.11%.0.5) 50px.hsla(197.62%.11%.0) 50px.hsla(197.62%.11%.0) 60px.hsla(5.53%.63%.0.5) 60px.hsla(5.53%.63%.0.5) 70px.hsla(35.91%.65%.0.5) 70px.hsla(35.91%.65%.0.5) 80px.hsla(35.91%.65%.0) 80px.hsla(35.91%.65%.0) 90px.hsla(5.53%.63%.0.5) 90px.hsla(5.53%.63%.0.5) 110px.hsla(5.53%.63%.0) 110px.hsla(5.53%.63%.0) 120px.hsla(197.62%.11%.0.5) 120px.hsla(197.62%.11%.0.5) 140px ), repeating-linear-gradient(135deg, transparent 5px.hsla(197.62%.11%.0.5) 5px.hsla(197.62%.11%.0.5) 10px.hsla(5.53%.63%.0) 10px.hsla(5.53%.63%.0) 35px.hsla(5.53%.63%.0.5) 35px.hsla(5.53%.63%.0.5) 40px.hsla(197.62%.11%.0.5) 40px.hsla(197.62%.11%.0.5) 50px.hsla(197.62%.11%.0) 50px.hsla(197.62%.11%.0) 60px.hsla(5.53%.63%.0.5) 60px.hsla(5.53%.63%.0.5) 70px.hsla(35.91%.65%.0.5) 70px.hsla(35.91%.65%.0.5) 80px.hsla(35.91%.65%.0) 80px.hsla(35.91%.65%.0) 90px.hsla(5.53%.63%.0.5) 90px.hsla(5.53%.63%.0.5) 110px.hsla(5.53%.63%.0) 110px.hsla(5.53%.63%.0) 140px.hsla(197.62%.11%.0.5) 140px.hsla(197.62%.11%.0.5) 160px );
Copy the code

66. Blue grid

background-color: #fff;
background-image: linear-gradient(90deg, transparent 79px.#abced4 79px.#abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2 em;
Copy the code

67. Red and white grid

  background-color: # 269;
background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255.255.255.3) 1px, transparent 1px), linear-gradient(90deg.rgba(255.255.255.3) 1px, transparent 1px);
background-size: 100px 100px.100px 100px.20px 20px.20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
Copy the code

68. Gray stripes

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px.rgba(255.255.255.5) 35px.rgba(255.255.255.5) 70px); 
Copy the code

69. Pipe surface texture

background-color: # 026873;
background-image: linear-gradient(90deg.rgba(255.255.255.07) 50%, transparent 50%), linear-gradient(90deg.rgba(255.255.255.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%.rgba(255.255.255.17) 50%), linear-gradient(90deg, transparent 50%.rgba(255.255.255.19) 50%);
background-size: 13px.29px.37px.53px;
Copy the code

70. Gray vertical line texture

background-color: gray;
background-image: linear-gradient(90deg, transparent 50%.rgba(255.255.255.5) 50%);
background-size: 50px 50px;
Copy the code

71. Gray stripe texture

  background-color: gray;
  background-image: linear-gradient(transparent 50%.rgba(255.255.255.5) 50%);
  background-size: 50px 50px; 
Copy the code

72. Bee mesh texture

background: radial-gradient(circle farthest-side at 0% 50%.#fb1 23.5%.rgba(240.166.17.0) 0)21px 30px.radial-gradient(circle farthest-side at 0% 50%.#B71 24%.rgba(240.166.17.0) 0)19px 30px.linear-gradient(#fb1 14%.rgba(240.166.17.0) 0.rgba(240.166.17.0) 85%.#fb1 0)0 0.linear-gradient(150deg.#fb1 24%.#B71 0.#B71 26%.rgba(240.166.17.0) 0.rgba(240.166.17.0) 74%.#B71 0.#B71 76%.#fb1 0)0 0.linear-gradient(30deg.#fb1 24%.#B71 0.#B71 26%.rgba(240.166.17.0) 0.rgba(240.166.17.0) 74%.#B71 0.#B71 76%.#fb1 0)0 0.linear-gradient(90deg.#B71 2%.#fb1 0.#fb1 98%.#B71 0%)0 0 #fb1;
  background-size: auto, auto, auto, auto, auto, auto;
background-size: 40px 60px;
Copy the code

73. Wavy textures

background: linear-gradient(#ffffff 50%.rgba(255.255.255.0) 0) 0 0.radial-gradient(circle closest-side, #FFFFFF 53%.rgba(255.255.255.0) 0) 0 0.radial-gradient(circle closest-side, #FFFFFF 50%.rgba(255.255.255.0) 0) 55px 0 #48B;
  background-repeat: repeat, repeat, repeat;
  background-size: auto, auto, auto;
background-size: 110px 200px;
background-repeat: repeat-x;
Copy the code

74. Tile texture

  background: linear-gradient(315deg, transparent 75%.#d45d55 0) -10px 0.linear-gradient(45deg, transparent 75%.#d45d55 0) -10px 0.linear-gradient(135deg.#a7332b 50%, transparent 0) 0 0.linear-gradient(45deg.#6a201b 50%.#561a16 0) 0 0 #561a16;
  background-size: auto, auto, auto, auto;
background-size: 20px 20px;
Copy the code

75. Thread fitting texture

background: linear-gradient(45deg.#dca 12%, transparent 0, transparent 88%.#dca 0), linear-gradient(135deg, transparent 37%.#a85 0.#a85 63%, transparent 0), linear-gradient(45deg, transparent 37%.#dca 0.#dca 63%, transparent 0) # 753;
  background-size: auto, auto, auto;
background-size: 25px 25px;
Copy the code

76. Football texture

background: radial-gradient(black 3px, transparent 4px), radial-gradient(black 3px, transparent 4px), linear-gradient(#fff 4px, transparent 0), linear-gradient(45deg, transparent 74px, transparent 75px.#a4a4a4 75px.#a4a4a4 76px, transparent 77px, transparent 109px), linear-gradient(-45deg, transparent 75px, transparent 76px.#a4a4a4 76px.#a4a4a4 77px, transparent 78px, transparent 109px), #fff;
  background-position-x: 0%.0%.0%.0%.0%.0%;
  background-position-y: 0%.0%.0%.0%.0%.0%;
  background-size: auto, auto, auto, auto, auto, auto;
background-size: 109px 109px.109px 109px.100% 6px.109px 109px.109px 109px;
background-position: 54px 55px.0px 0px.0px 0px.0px 0px.0px 0px;
Copy the code

conclusion

Life may be busy, but you still have to make time to learn and improve every day. Programmer industry, is a lifelong learning industry, timely review the old knowledge, regular learning of new knowledge, to make their continuous progress. Look up to the best. In this way, I will be more excellent. We’re finally done. You can go to bed happy.

͜҉ ͜҉✿ ͜҉ ͜҉✿Personal blog [Welcome to cherry blossom]͜҉ ͜҉ ✿ ͜҉ ✿

The sunset sky, the gentle evening breeze, the dinner of the lover, there are many beautiful things in the world, do not be confused by the darkness in front of you, you have to believe that you deserve all the beautiful things in the world. Good night

The resources

Appreciate] [several CSS cool background blog.csdn.net/zhongguohao…
[CSS implements cool dynamic background effects]blog.csdn.net/qq_38232003…
[CSS3 makes cool striped backgrounds] www.jb51.net/css/585966….
[CSS can play like that? Ideas, gradual art] www.imooc.com/article/316…
Zli.me/HTMLS /621.h…
[range of a set of background texture] wow.techbrood.com/fiddle/1063…
[CSS 3 Patterns Gallery] projects. Verou. Me/css3pattern…
[deep understanding of CSS radial gradient radial gradient] – www.cnblogs.com/xiaohuochai…
[MDN — linear gradient] developer.mozilla.org/zh-CN/docs/…