Online gradient text & background maker, review please

Online gradient text & background maker, review please

Hi,
I just completed coding this:
https://vagMineTech.com/imageMake/gradientImage.php

It generates gradient backgrounds, or gradient text, or both together.
A sample of both together is seen by default when you click the link above.
My choice of color combinations might get you going LMAO, so please excuse the default color combination.
Change those to something of your choice.
Both RGB and HEX are supported.

Normally the solutions I have found online break the string into characters and change the color character by character.
They do not generate a smooth photoshop like gradient effect on text.

The online gradient tool at VagMineTech.com tries to do what photoshop does in their text gradient effect.
Not sure how much I succeeded in getting this right...
You will see much better gradient effect on larger font sizes and longer strings.

By the way, vertical gradient means top to bottom, not a vertical line in the middle.
Likewise, horizontal gradient means left to right, or vice versa, not a flat horizontal line in the middle.

Repeat gradient means a gradient pattern repeating itself over and over again for entire width/height.
Stretch gradient means 2 colors, one fading into another for the entire width/height.
Can reverse the direction of stretch gradient, can skew it too.

Let me know your thoughts.

 

It has a lot of aliasing bleed, likely from trying to flood fill as a raster. Makes it look a bit wonky. Likewise the gradients seem to have specular issues almost as if you're making it restrict to 8 bit color, hence it seeming almost dithered.

The interface could use some formatting so that it doesn't look like all the label and input are tossed in there willy-nilly.

Though these days given what it's making I'm not sure this is something I'd even waste images on. I could probably implement something like this where the result is HTML+CSS that would look far better, thanks to the CSS background-clip property and how it interacts with color:transparent.

<h1>
	<a href="/">
		<span>Domain</span>
		<small>Small Caption Line</small>
	</a>
</h1>

Code (markup):

Then for the CSS:

h1 {
	display:inline-block;
	text-align:right;
	padding:0.35em 1em;
	font:normal 8em/1.5em tahoma,helvetica,sans-serif;
	background:#004;
	background:linear-gradient(
		170deg,
		#FFF 0%,
		#004 40%
	);
}

h1 a {
	display:inline-block;
	text-decoration:none;
}

h1 span,
h1 small {
	display:block;
	background-clip:text;
	-webkit-background-clip:text;
	color:transparent;
	vertical-align:bottom;
}

h1 span {
	margin-top:-0.4em; /*compensate for tahoma's crap X-height alignment */
	background-image:linear-gradient(
		180deg,
		#600 0%,
		#B77 60%,
		#FFF 61%
	);
	-webkit-text-stroke:0.016em #006;
}

h1 small {
	font-size:0.2em;
	line-height:1.2em;
	font-weight:normal;
	text-align:right;
	background-image:linear-gradient(
		90deg,
		#999 0%,
		#FFF 100%
	);
}

@media all and (-ms-high-contrast:none) {
	/* make this at least show text in IE10 */
	h1 span,
	h1 small {
		background:transparent;
		color:#FFF;
	}
}

Code (markup):

Around 1k of code, most of it in the stylesheet where it can be cached... replacing an image that would be around what, 20 or 30k?

Just beware it goes bits-up face-down in IE9/earlier... and it won't be styled in IE 10-11 (you get white text with no stroke). If you really care about IE9/earlier at least showing the text, a separate sheet in a IE CC is likely the best course of action.

Live demo here:
https://cutcodedown.com/for_others/Jeet/gradient/

You can see the significant difference in quality using CSS instead of images brings to the table.

Basically, if this tool is for websites, it's not an image's job anymore. Be fun if you rewrote it to spit out the proper CSS though.

 

Thanks for the input. Will try to improve this.

 

Added an option for text gradients (not background yet), "Smooth transformation gradient".
Its the last checkbox in text style area, ticked by default.
Results:
http://vagminetech.com/imageMake/gradientImage.php

This must look close to what you showed with CSS. The image generated has a stroke color for text "DOMAIN", you can remove it.

Uncheck the smooth checkbox, and you can see the previous style, one color fades into another.
This one is - one color transforms into another.

 

Hello there

I am not a coder, so won't be sharing feedback about the technology
Being a designer, this definitely helps a lot. This would be such a helpful tool for small designers!

 

Thanks Pratik
I am glad you found it useful

 

It's working just fine! Designers need these kind of stuff, it's easy to use it'll be beneficial to us!
Nice work!

 

Ayoub benali01
Thanks, glad you liked it