Subscribe
Sign in
Gradienta — Open-source multi-layered CSS gradients with JPG downloads
150+ Carefully Crafted CSS Gradienta for your upcoming projects. All of these gradients are available under MIT license. Can be copied as CSS codes, downloadble as JPG, PNG & SVG format with user preferred dimensions.
75
Replies
@parvezvai @volkandkaya Hi, it's me. Let me know what is your opinion and how would you use it. Cheers!
@parvezvai @shemul I have a gradient selector on my website builder, we have some good ones but yours are really special, is it possible to send me a json file with all the gradients?
@parvezvai @volkandkaya I think this is a dev question. I will contact him and let you know what can we do for you.
Hello ProductHunt!
I am too much excited that it has been featured on PH. The idea is not very unique. As a designer, i know how blend mode works, i use blend modes a lot in my designs. So when i saw the raise of CSS gradients, i thought, i should create a collection also. But later i thought that, why should i reinvent the wheel? Then i thought i can make multi stop gradients instead of 2 or 3 color stops gradient.
Later, I experiemented a lot and find that I can use blend modes, CSS supports blend modes well. This is the main story of how Gradienta born.
Since this is a free to use collection, I decided to make it open source, under MIT license. Anyone can use these CSS codes in their personal and commercial projects.
The real problem was, how do designers and other internet users will use them since it's CSS code! Then we decided to think something differently. We made a conversion tool that converts CSS to JPG, PNG and SVG. The browser actually takes a screenshot with your preferred dimension. This way, you can download images in different ratio and pixel sizes.
The website has been developed and all of the creative functions/algorithms by @zonayedpca. I just designed the website interface and of course, all the CSS gradients. All credit goes to the Almighty Allah.
We have some future plans to make it more useful and friendly to our fellow designers and developers. There will be a advanced gradient editor, a user submission system so people can use, alter and submit gradients. Having said that, we need your support and feedback to make it more usefull. Thanks in advance for checking Gradienta!
Very cool will look to add this into Versoly we already have some gradients and this will make a great addition.
Thanks for the MIT license!
Nice project!
But in Chrome, Firefox, Safari they all look different because their implementations are all different.
It would be nice to guide you through this information, and it would be nice to be able to download different images for different browsers.
When I download an image in Chrome, it downloads a different image than the one I actually see.
@_chris_yang_ If you download an image of noisy type, then you would see a clean image, no noise. Because you downloaded high resolution version of what you saw. It is recommended to view the downloaded image in 100% view. Then you will see the actual browser version. This is how image resolution works.
But there is nothing we can do, every browser renders colors and CSS a bit differently. That is why the colors vary browser to browser. Thank you.
ThriveDesk