Hello fellow designers!

I wanted to take a moment to introduce you all to a project that’s been a true labor of love for me—Gradienty. As a designer myself, I’ve always been looking for ways to speed up my workflow, particularly when it comes to adding those little touches that really make a design pop, like gradients and frosted glass effects. I got tired of tweaking CSS endlessly just to get things looking the way I wanted, so I decided to build something that solves that for us.

That’s where Gradienty comes in.

What is Gradienty?
It’s a free web tool I created specifically for designers who use Tailwind CSS (but honestly, it works well for any CSS-based project). With just a few clicks, you can generate beautiful gradients, text gradients, glassmorphism effects, mesh gradients, and even custom blob shapes. No need to mess around with CSS code or worry about getting the right gradient stop. It’s fast, it’s easy, and it gives you copy-paste-ready CSS to drop into your projects.

Why did I build this?
Like most of you, I’m constantly juggling between client work, side projects, and just general experimentation. I wanted something that could take some of the repetitive work off my plate while still giving me full creative control. After launching the first version last year, the feedback I got from fellow designers really helped shape Gradienty V2 into what it is now. Every feature in the tool has been added with real-world design needs in mind, based on what the community wanted.

Here’s what you can do with Gradienty:

• Generate Gradient Backgrounds: Create smooth, eye-catching backgrounds with multi-layered gradients. Choose your colors, adjust stops, and copy the code—simple as that.

• Text Gradients: Make your typography pop with stylish gradient text effects, perfect for making headers or callouts stand out.

• Gradient Box Shadows: Add depth to your design elements with subtle or bold gradient shadows to give your UI components that extra touch.

• Glassmorphism: Easily craft frosted glass effects that are perfect for modern UIs. With just a few tweaks, you can bring the trendy Glassmorphism style into your projects.

• Mesh Gradients: For more abstract designs, create fluid, multi-color gradients with our mesh generator—great for backgrounds or adding a modern, artistic vibe.

• Blob Generator: Fun, customizable blob shapes to use as design accents or background elements. You can adjust their size, form, and complexity to match your aesthetic.

I know there are tons of tools out there, but what makes Gradienty different is that it’s made by someone who gets the design process. I’ve kept everything free and completely open—no paywalls or hidden features—because I really believe in empowering fellow designers to create beautiful work without barriers.

You can give it a try here: Gradienty.codes.

I’d love to hear your thoughts, suggestions, or feedback. The tool is constantly evolving, and it’s really driven by what you, the design community, needs.

Looking forward to seeing what you create!

Edited October 15, 20241 yr by Roushan

Thank you for sharing this!

We have quite a few members who strive to keep their builds to pure HTML and CSS. This will be right up their alley - I can imagine this being bookmarked!

The Tailwind Glassmorphism Generator and Blog Generator are both really cool!

2 hours ago, Jogeta316 said:

Thank you for sharing this!

We have quite a few members who strive to keep their builds to pure HTML and CSS. This will be right up their alley - I can imagine this being bookmarked!

The Tailwind Glassmorphism Generator and Blog Generator are both really cool!

That's awesome, thank you and I hope it helps people be a little more productive in their day-to-day

Bit of a thicko here. I just handcode gradients, done so many over the years I can do it in my sleep.

But I gave your tool a go and can't see how to get the CSS.

All I got was:

bg-gradient-to-tl from-slate-800 via-violet-500 to-zinc-400 bg-clip-text text-transparent

 

On 10/15/2024 at 8:31 PM, fisicx said:

Bit of a thicko here. I just handcode gradients, done so many over the years I can do it in my sleep.

But I gave your tool a go and can't see how to get the CSS.

All I got was:

bg-gradient-to-tl from-slate-800 via-violet-500 to-zinc-400 bg-clip-text text-transparent

 

Sorry for the late reply - with the launch of v2 last night, you should now be able to copy CSS (and TailwindCSS) for almost every single tool on there.

Also added Color Palettes, and their conversion to Mesh Gradients, and a ton more. Have a look, thanks!

Nice one! Thank you for sharing!

9 hours ago, Roushan said:

Sorry for the late reply - with the launch of v2 last night, you should now be able to copy CSS (and TailwindCSS) for almost every single tool on there.

That works.

But the black background needs to go. Almost all websites have a white background and dark text for a reason: better conversions.

Just trying to use your box shadow tool and it's not easy to see anything. And the controls are a bit restricted. Look at this as an example of how you can do things:

https://box-shadow.dev/

or this:

https://10015.io/tools/css-box-shadow-generator

42 minutes ago, fisicx said:

That works.

But the black background needs to go. Almost all websites have a white background and dark text for a reason: better conversions.

Just trying to use your box shadow tool and it's not easy to see anything. And the controls are a bit restricted. Look at this as an example of how you can do things:

https://box-shadow.dev/

or this:

https://10015.io/tools/css-box-shadow-generator

Thanks for the feedback. And yes, I will add a light mode in the near future as well.

Or do the sensible thing and just give it a white background. 

And have the controls always visible. Makes for a much better UX/UI.

Had a play with tailwind yesterday. It’s a really inefficient way to write css. Umpteen classes get added to each element where traditional CSS can do the same with just one.

It is very clever but not very good.

25 minutes ago, fisicx said:

Had a play with tailwind yesterday. It’s a really inefficient way to write css. Umpteen classes get added to each element where traditional CSS can do the same with just one.

It is very clever but not very good.

I think the tradeoffs are definitely there, but if you are working on new sites every day - or if you're visiting an old project that you had worked on an year ago, its much easier to pick up with Tailwind than to look at the 20,000 line style.css file, and try to check references for what each class does.

Not to mention, it does take care of the "deciding what to name your 10th button class" problem, so you can just write CSS without ever thinking about naming conventions etc.

So yeah, its cool and even clever, but has its tradeoffs. Both do.

1 hour ago, Roushan said:

than to look at the 20,000 line style.css file

If your CSS file is that big there is something wrong. Bootstrap used to be like this but there is no need for massive CSS files. A properly structured page shouldn't need a 10th button class.

I can get a full wordpress responsive theme CSS stylesheet down to around 300 lines.