Subscribe
Sign in
Gradienta
p/gradientaOpen-source multi-layered CSS gradients with JPG downloads
Start new thread
Parvez Akther

Gradienta - Open-source multi-layered CSS gradients with JPG downloads

by
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.

Add a comment

Replies

Best
Parvez Akther
Hunter
This tool is really fascinating and I know how hard it is to generate beautiful gradient for website.
Volkan Kaya
@parvezvai Who is the maker?
Shahadat Shemul
Maker
@parvezvai @volkandkaya Hi, it's me. Let me know what is your opinion and how would you use it. Cheers!
Volkan Kaya
@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?
Shahadat Shemul
Maker
@parvezvai @volkandkaya I think this is a dev question. I will contact him and let you know what can we do for you.
Shahadat Shemul
Maker
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!
Andrei
Looks great!
Chris
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.
Shahadat Shemul
Maker
@_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.
Al Amin Mir
Too much lovely <3
Amar Omer
@aflamesaimon Show me the best solution for my application appearance ... Thank you for this Product
Volkan Kaya
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!
Shahadat Shemul
Maker
@volkandkaya This is awesome mate. Really appreciated.
Md Sajol
Awesome! Gradient, color combination, minimal, aesthetically pleasing and super-functional of gradienta. Love it!
arifuzzaman arif
Amazing cool tool Thanks gradienta.
lucas hogendoorn
Love this!!! This is so cool and original :D
Shahadat Shemul
Maker
@lucas_hogendoorn Thank you for the appreciation. :D
Fajar Siddiq
Congratulations on the launch!
Arifuzzaman Sajib
All gradient are very cool. love this (y) <3
Nayeem Hossain
Love this😍😍.. This is really fantastic 😲
Wahiduzzaman Apu
Gradienta is very Attractive & Cool Tool. Loved it!
Sk Nazmus Shadhat Tuhin
Awesome! This is really fantastic
Mantas Jonaitis
this is amazing!
King Rayhan (kingRayhan)
Beautiful
Anis Ahmad
Awesome gradients! 👍 It's amazing to see that you've generated them using CSS!
Shahadat Shemul
Maker
@ajaxray Thank you so much. It should be helpful for you guys.
Al Amin
Creative work, loved it
Serzill Hasan
Well.. color separation or color blending in a most acceptable way without creating a disturbing contrast (which we see a lot now-a-days) is really creative move. Wish you all the best .. and thank you for helping learner designer like us to use it under MIT.. appreciated <3
Shahadat Shemul
Maker
@serzill I did it for the community, since this internet designers/developers community gave me so much and made me how I am today. Thank you so much bhai.