10 visual CSS tools to quickly generate CSS fragments, scumbag, want to abandon me again! !


Author: Jatin Sharma
Translator: Frontend Xiaozhi
Source: dev

If you have dreams and dry goods, search for [Great Move to the World] attention to this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test sites, materials and my series of articles.

Today I continue to recommend several artifacts to improve our fishing time. Trust me, you will fall in love with them.

1. Neumorphism

Address: https://neumorphism.io/

This website section or div , it can also customize border-radius , box-shadow etc.

2. Shadows Brumm

Address: https://shadows.brumm.af/

It can generate multiple layered shadows for us, a very cool effect, or customize the color from the curve.

3. CSS Clip-path Maker

Address: https://bennettfeely.com/clippy/

This is the one I used the most. In the early recorded CSS videos, many complex effects were generated by this tool for me, and I recommend it.

4. Fancy Border Shape Generator

Address: https://9elements.github.io/fancy-border-radius/#

It generates a very awesome shape by operating border-radius , we can use it as much as we want in the project, and fine-tune it to achieve the shape we want.


5. Cubic Curve

Address: https://cubic-bezier.com/

cubic-bezier for CSS animation.


6. CSS Gradient

Address: https://cssgradient.io/

If your project often needs to use gradients, then you will love this website. I used it for a long time and it was perfect. Here you can also use some tools, such as gradient buttons and so on.


7. CSS Waves Generator

The following three wave generators can generate any type of waves, and those who are still worried about breaking waves can use them.

CSS Waves

Address: https://getwaves.io/

It can generate simple waves and has some custom features.


Gradient Multiple Waves

Address: https://www.softr.io/tools/svg-wave-generator

It can generate multiple gradient waves, which is great.


Multiple Animated Waves

Address: https://svgwave.in/

It can generate multiple gradient waves, but the main feature is that it can also generate real-time animation for this.


8. CSS Grid Generator

CSS grid

Address: https://cssgrid-generator.netlify.app/

It generates great css for the grid, you can customize it with divs, and it also creates child elements for it.


CSS Grid Area

It can generate grid areas. We can name and customize the area according to specific needs.


9. Loading Animated GIFs/SVGs

Address: https://loading.io/

This website can generate multiple loading animations and download them in SVG, GIF, PNG and other formats, but its biggest feature is that you can customize these animations to a new level.


10. Free Icon Library


Address: https://www.flaticon.com/

This library has 5.7M+ vector icons. Any possible icon can be found here, and you can use it.



Address: https://icons8.com/

This library also has a large number of icons, you can customize them or use the icons directly without downloading it.



I hope you have learned something from this article, and if so, please come to Bozanbe.

~~End, I’m a dishwashing, inspirational person who will go home to set up a street stall after retirement. See you in the next issue!

possible bugs of 1618c5d0b8eb39 code after deployment cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6


The article is continuously updated every week, you can search on [The Great Move to the World] Read it as , reply 1618c5d0b8ebb0 [Welfare] are multiple front-end videos waiting for you, this article GitHub has been included, welcome to Star.

阅读 2.2k

62.9k 声望
95.1k 粉丝
0 条评论
62.9k 声望
95.1k 粉丝