Preface 🎄

Front-end development, color collocation is very important, good color design will add luster to the website, so that users look happy mood; Bad colors

With the development of design technology, gradient color is becoming more and more popular in color design, but it is not easy to design a satisfactory gradient color (actually feel, feel your color is really ugly).

A few days ago, when xiao Bao was using CSS to draw lipstick, he could not choose the appropriate color, and even xiao Bao once questioned his aesthetic. Xiao Bao, are you really doing the front end?

In the end, the bag also failed to solve their own aesthetic problems, but the bag will use search ah, the Internet method is good, let’s look at the bag bookmark inventory plus Baidu results.

If you have a better gradient site, be sure to comment and tell xiaobao, thanks! 💖

Eggradients 🥚

Portal: Eggradients

Eggradients is a very cute site for gradients. All gradients are made up of eggs that look like a lot of beauty eggs. Eggradients offers over 200 eggs. Each beauty egg color scheme can be obtained by Copy CSS in the lower right corner, and it is strongly recommended to collect.

Whenever you feel displeased, can see lovely beauty makeup egg, delicate egg, dazzle colour color, the life is so beautiful, the world is so much jiao, want reasonable coil, do not do impulsive thing.

Gradients of Shapefactory 🌿

Portal: Gradients of Shapefactory

Gradients of Shapefactory offers a variety of color schemes for Gradients (I don’t know how to count them all), online adjustment of gradient Angle, brightness, saturation, etc., and a palette in the left pane to select the base tone for Gradients. Rare gradient color matching site, strongly recommended collection.

Grabient 🌷

Portal: Grabient

Grabient offers 25 kinds of gradient color schemes, but the color scheme provided by Grabient has a high degree of freedom. It supports online adjustment of gradient Angle, adding gradient color and adjusting gradient position, so it can expand the original color scheme freely according to needs.

The ColorSpace 🌳

Portal: ColorSpace

ColorSpace is based on the gradient style and is relatively easy to operate. You only need to enter one color (hexadecimal) to generate dozens of different gradient color schemes

For example, I type black (#000000) and click generate to generate dozens of colors. With ColorSpace, you have a library of gradient colors.

WebGradients 🍃

Portal: WebGradients

WebGradients offers 180 gradients, so if you’ve got a color scheme you can click on the Copy CSS option in the lower right corner to get a color scheme, or click on the upper right to download a PNG for a preview.

WebGradients offers color schemes that are mostly light and fresh, which are good for a website background.

Uigradients

Portal: Uigradients

Uigradients offers more than 300 color schemes, but the gradient implementation used by Uigradients color scheme is mostly evenly divided implementation (several colors are divided into several 100%), and the color scheme is mostly fierce.

CoolHue 🌾

Portal: CoolHue

CoolHue offers more than 50 color schemes, as well as a free gradient color plugin and collection tool, Swatch. The specific color scheme can be obtained from console F12.

Gradienta 🌴

Portal: Gradienta

Gradienta offers 182 Gradienta color schemes in CSS, SVG, and JPG formats. Above all, Gradienta offers more than just a few Gradienta colours, but more like a well-designed palette of colours and clams, with many backgrounds that are slightly abstract

Mesh Gradient

Portal: Mesh Gradient

Mesh Gradient offers more than 100 Gradient color schemes, from plain color gradients to cool rainbow gradients. Compared to Gradienta, Mesh Gradient is more elegant and lighter.

Cool Background 🥦

Portal: Cool Background

Cool Background is not a complete gradient color matching website. In addition to providing gradient color matching, it also provides many texture Background images and Cool Background implementation schemes (such as particle Background), which is suitable for formal business style and a bit more mature style.

Duotones 🌵

Portal: Duotones

Duotones offers 17 color schemes, but the main function of Duotones is to add filter-like, two-tone effects to images, as well as adjust contrast and brightness.

Previous wonderful articles 💘

  • Cow guest latest front-end JS written test 100 questions
  • The latest front end of the interview questions summary (including analysis)
  • CSS to achieve a free flying bird 🐦
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Happy cat stroking for VSCode and website adoptive cats
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • # Gradient can’t tune? These 10 websites will help you get it done quickly!

After language 💥

Guys, if you find this article helpful, give a like to 👍 or follow ➕ to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!