Today we continue to recommend several artifacts to improve our fishing time. Believe me, you will fall in love with them.
1. Neumorphism
Address: https://neumorphism.io/
This website generates corresponding UI for section
or div
, it can also be customized border-radius
, box-shadow
etc.
2. Shadows Brumm
Address: https://shadows.brumm.af/
It can generate multiple layered shadows for us, a really cool effect, and also customize colors from curves.
3. CSS Clip-path Maker
Address: https://bennettfeely.com/clippy/
This is the one I use the most. I used this tool to generate many complex effects in the CSS videos I recorded earlier, and I recommend it.
4. Fancy Border Shape Generator
Address: https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
It border-radius
generates awesome shapes through manipulation, we can use them freely in the project, and achieve the shape we want through fine-tuning.
5. Cubic Curve
Address: https://cubic-bezier.com/
Generated for CSS animations cubic-bezier
.
6. CSS Gradient
Address: https://cssgradient.io/
If you often use gradients in your projects, then you'll love this site. I have used it for a long time and it is 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 friends who are still struggling to draw broken waves can use them.
CSS Waves
Address: https://getwaves.io/
It can generate simple waves and has some customization features.
Gradient Multiple Waves
Address: https://www.softr.io/tools/svg-wave-generator
It can produce 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 awesome 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 zones according to our specific needs.
9. Loading Animated GIFs/SVGs
Address: https://loading.io/
This site can generate multiple loading animations and download them in SVG, GIF, PNG, and other formats, but its best feature is that you can customize these animations to new levels.
10. Free Icon Library
Flaticons
Address: https://www.flaticon.com/
This library has 5.7M+ vector icons. Any possible icon can be found here and you can use it.
icons8
Address: https://icons8.com/
This library also has tons of icons that you can customize or use directly without downloading it.
Summarize
Hope you learned something from this article, if so, please come to Pozant Quilt.
~~End, I am a dishwashing, inspirational person who wants to go home and set up a street stall after retirement, see you in the next issue!