13 beautiful gradient tools every web designer should know (all free):
1.Web Gradients
A free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 cross-browser code and use it in a moment!
👉 webgradients.com
A free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 cross-browser code and use it in a moment!
👉 webgradients.com
2.Grabient
Add up to 6 colors, change the angle of the gradient with the modern-looking UI.
👉 grabient.com
Add up to 6 colors, change the angle of the gradient with the modern-looking UI.
👉 grabient.com
3.UI-Gradients
Browse lots of predefined gradients from the gallery and edit the gradient direction in the generator. Opensource, add your own gradients via code.
👉 uigradients.com
Browse lots of predefined gradients from the gallery and edit the gradient direction in the generator. Opensource, add your own gradients via code.
👉 uigradients.com
4.HyperColor
A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS, or even save the gradients as an image.
👉 #gradients" target="_blank" rel="noopener" onclick="event.stopPropagation()">hypercolor.dev
A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS, or even save the gradients as an image.
👉 #gradients" target="_blank" rel="noopener" onclick="event.stopPropagation()">hypercolor.dev
5.Gradient King
Browse lots of gradients based on the color theme. Also includes an option to generate the gradient-based on uploaded image colors. Option to sign in and save your favorites.
👉 gradient-king.vercel.app
Browse lots of gradients based on the color theme. Also includes an option to generate the gradient-based on uploaded image colors. Option to sign in and save your favorites.
👉 gradient-king.vercel.app
6.CoolHue
Try Coolhue Gradient Palette Plugin. With it, you can directly access gradient colors palette from right inside your favorite prototyping tools like Sketch App and Figma.
👉 webkul.github.io
Try Coolhue Gradient Palette Plugin. With it, you can directly access gradient colors palette from right inside your favorite prototyping tools like Sketch App and Figma.
👉 webkul.github.io
7.GradientHunt
Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients.
👉 gradienthunt.com
Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients.
👉 gradienthunt.com
8.CSS Gradient
Gradient generator with modern-looking UI and lots of customization options.
👉 cssgradient.io
Gradient generator with modern-looking UI and lots of customization options.
👉 cssgradient.io
9.Gradient Png
Supports adding up to 5 colors, switching their positions, changing their weight, and other customization options. Random mode to come up with awesome presets.
👉 gradient-png.netlify.app
Supports adding up to 5 colors, switching their positions, changing their weight, and other customization options. Random mode to come up with awesome presets.
👉 gradient-png.netlify.app
10.Mycolor space
Generate a CSS Color Gradient with 2 or 3 colors. Change directions and copy the CSS code when ready.
👉 mycolor.space
Generate a CSS Color Gradient with 2 or 3 colors. Change directions and copy the CSS code when ready.
👉 mycolor.space
12.Gradient Generator
Advanced CSS gradient generator by Josh W Comeau. Lots of customization options such as color mode, angle, and easing curve.
👉 joshwcomeau.com
Advanced CSS gradient generator by Josh W Comeau. Lots of customization options such as color mode, angle, and easing curve.
👉 joshwcomeau.com
13.CSS Gradient Generator
Create linear and radial gradients. Experiment with random color modes and edit gradient directions. Switch between HEX and RGBA modes.
👉 css-gradient.com
Create linear and radial gradients. Experiment with random color modes and edit gradient directions. Switch between HEX and RGBA modes.
👉 css-gradient.com
That's a wrap! Thank you for reading!
I tweet about dev-related productivity tips and resources, create discussions and make articles on career growth.
If you found this thread useful make sure to follow me (@madzadev) and RT this thread. Thanks! 🙏💖
I tweet about dev-related productivity tips and resources, create discussions and make articles on career growth.
If you found this thread useful make sure to follow me (@madzadev) and RT this thread. Thanks! 🙏💖
جاري تحميل الاقتراحات...