[ Written in the front ] During the web development process, the background color of the page wants a gradient effect. Many times the online search is full of ugly colors like the official website, especially when some buttons and some large background colors cannot be done very well. yellow, today I will be a tool person to list some beautiful gradient effects and implementation methods that I have summarized during my work.
Involved knowledge points : CSS beautiful gradient example, CSS horizontal gradient, CSS radial gradient, CSS gradient, beautiful gradient background color, a variety of beautiful gradient effect diagrams;
[Huangbang] Those who support bloggers can see the Huangbang , waiting for you to be on the list!
Table of contents
Effect preview
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane, If you have any doubts, please leave a message and send a private message!
1. What is CSS3 Gradient?
First of all, the literal meaning of gradient is to gradually change, and we often use it to set the background color. The official term is to make a smooth transition between two or more colors.
Its advantage is that when some background colors want to have a good effect, you don’t need to make a picture with PS yourself, and then set the background picture or something. We can directly set it through the style attribute of CSS3 gradient (gradient), which reduces page resource requests. Wouldn't it be nice to be able to adjust the color system at will!
2. CSS3 gradient types
2.1 linear gradient (linear-gradient)
2.1.1 Principle Description
Linear means that the gradient color can achieve different display effects of colors in different directions, and supports multiple directions such as up/down/left/right/diagonal. Among them, a variety of colors can be added, for convenience, I used two types;
the default attribute (from top to bottom): background-image: linear-gradient (#e66465, #9198e5);
set the direction (from left to right): background-image: linear-gradient (to right, #e66465, #9198e5);
diagonal direction (from top left to bottom right): background-image: linear-gradient (to bottom right, #e66465, #9198e5);
set angle (From left to right): background-image: linear-gradient (45deg, #e66465, #9198e5);
Nice linear gradient effect:
2.1.2 Implementation code
In fact, there are many other effects. I deliberately select one for everyone to apply. The specific implementation code style is as follows:
X1: style
background: linear-gradient(#e66465, #9198e5);
X2: style
background: linear-gradient(to right, #9fe1fa, #f4edc9);
X3: style
background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
X4: Style
background: linear-gradient(111.4deg, rgb(238, 113, 113) 1%, rgb(246, 215, 148) 58%);
X5: Style
background: linear-gradient(102.7deg, rgb(253, 218, 255) 8.2%, rgb(223, 173, 252) 19.6%, rgb(173, 205, 252) 36.8%, rgb(173, 252, 244) 73.2%, rgb(202, 248, 208) 90.9%)
X6: Style
background: linear-gradient(58.2deg, rgba(40, 91, 212, 0.73) -3%, rgba(171, 53, 163, 0.45) 49.3%, rgba(255, 204, 112, 0.37) 97.7%)
X7: Style
background-image: linear-gradient(181.2deg, rgb(181, 239, 249) 10.5%, rgb(254, 254, 254) 86.8%);
X8: Style
background-image: linear-gradient(107.7deg, rgb(101, 168, 143) -30.7%, rgb(144, 220, 193) 7.2%, rgb(225, 203, 150) 31.3%, rgb(251, 166, 150) 82.6%, rgb(250, 54, 65) 128.5%);
X9: Style
background-image: linear-gradient(111.4deg, rgb(209, 231, 235) 7.4%, rgb(238, 219, 199) 51.4%, rgb(255, 159, 122) 82.6%, rgb(255, 109, 58) 100.2%);
X10: Style
background-image: linear-gradient(109.6deg, rgb(101, 58, 150) 29.9%, rgb(168, 141, 194) 99.9%);
X11: Styles
background-image: linear-gradient(106.5deg, rgba(255, 215, 185, 0.91) 23%, rgba(223, 159, 247, 0.8) 93%);
X12: Style
background-image: linear-gradient(109.6deg, rgb(0, 51, 102) 11.2%, rgb(187, 187, 187) 91.1%);
X13: Style
background-image: linear-gradient(103.3deg, rgb(252, 225, 208) 30%, rgb(255, 173, 214) 55.7%, rgb(162, 186, 245) 81.8%);
X14: style
background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
2.2 radial gradient (radial-gradient)
2.2.1 What is radial gradient?
The CSS radial gradient is like a box, you can set the gradient color from a certain center, spread out, or set the gradient color in other shapes, you can also understand it as the background color radiation, and its property settings can specify the center and shape of the gradient (circle
or oval), size. Under normal circumstances, the center of the gradient is center-[indicates at the center point], the shape of the gradient is ellipse-[indicates an ellipse], and the size of the gradient is farthest-corner[indicates to the farthest corner]
2.2.2 CSS Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
| parameter | meaning | Defaults |
|---|---|---|
| shape | Define the shape (circle or ellipse) | ellipse (represents an ellipse) Note: the width and height of the container are not equal |
| size | define size | farthest-corner (indicates to the farthest corner) |
| position | Define the location of the center of the circle | center (indicates at the center point) |
| start-color | define the color value to start with | required, no default |
| … | You can define a variety of transition colors in the middle | Not required, see color matching requirements |
| last-color | Defines the color value for the end | required, no default |
2.2.3 Common examples of radial gradient
In fact, the color matching depends on personal preference. The main application methods include the following:
Pixel position setting: background: radial-gradient (978px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193, 94, 245 , 0.73) 100.2%)
Shape position setting: background: radial-gradient (circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%) The
specific implementation is as follows:
J1. Style
background: radial-gradient(178px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193, 94, 245, 0.73)100.2%)
J2. Style
background: radial-gradient(128px at 31.7% 40.2%, rgb(225, 200, 239) 21.4%, rgb(163, 225, 233) 57.1%)
J3. Style
background: radial-gradient(169px at -2.9% 12.9%, rgb(247, 234, 163) 0%, rgba(236, 180, 238, 0.56) 46.4%, rgb(163, 203, 247) 100.7%)
J4. Style
background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)
J5. Style
background: radial-gradient(circle at 32.2% 83.5%, rgb(239, 167, 167) 0%, rgb(215, 123, 191) 90%)
J6. Style
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);
J7. Style
background-image: radial-gradient(circle at 10.6% 23.3%, rgb(186, 162, 252) 0%, rgb(176, 248, 242) 72.4%);
J8. Style
background-image: radial-gradient(circle at 10% 20%, rgb(249, 57, 170) 9.8%, rgb(134, 176, 255) 94.9%);
J9. Style
background-image: radial-gradient(circle at 48.7% 44.3%, rgb(30, 144, 231) 0%, rgb(56, 113, 209) 22.9%, rgb(38, 76, 140) 76.7%, rgb(31, 63, 116) 100.2%);
J10. Style
background-image: radial-gradient(circle at 10% 20%, rgb(222, 168, 248) 0%, rgb(168, 222, 248) 21.8%, rgb(189, 250, 205) 35.6%, rgb(243, 250, 189) 52.9%, rgb(250, 227, 189) 66.8%, rgb(248, 172, 172) 90%, rgb(254, 211, 252) 99.7%);
Copyright Statement: Originally published in CSDN Blogger - Learn Codes for the Blind with a Cane, If you have any doubts, please leave a message and send a private message!
3. Complete example of CSS3 gradient
3.1 Baidu Netdisk
Link: https://pan.baidu.com/s/1RX5qX9GdJ1w2ML0W333dJg
Extraction code: hdd6
3.2 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-0OJ4.html
Extraction code: hdd6
3.3 End credits easter eggs
Dedicated to creating a masterpiece, I would like to solve your confusion. If you are lucky, I hope you will be on the list to help out. Thank you very much! Click here for the entrance of
Huangbang
If you have any questions, please feel free to leave a message. In 2023, let’s go together! ! !