Gradient Text

Color 1: Color 2:
Graduations 1-2:
Enter your text:

0 Visible Characters


Text Gradienter

Welcome to the text gradienter, unlike other text gradienters this one will allow you to have multiple colors, custom graduations, and output in Bulletin Board Code, Hyper Text Markup, plus a preview which you can all copy to your clipboard handily.

Click on a color form field to open up a color picker where you can choose your color, once you are finished, click on the "close" button. The colors chosen will be the colors of the gradient in numerical order. The number spinner allows you to set the number of steps between the gradients, minimum is 2 and maximum is 100, if you set the steps below the amount of text you have the gradient will repeat itself and if you set it more the gradient will partially color the text. You may add more colors by clicking on the "Add Color" button and remove them by clicking on the "Remove Color" button. You can have up to 25 colours!

Once you have finished setting your colors input your text that will be gradiented in the text box given, keep in mind any bbcode/html will not be parsed (rather it will be gradiented :P). You additionally have options of automatically evenly graduating the gradient and reversing the gradient.

Finally, you can now click the "Gradient Text!" button to get your code! You will be given BBCode which you can use on forums, HTM which you can use on websites, and a preview which you can copy into a visual editor.

Credit to jscolor.com for the colour picker and switchonthecode.com for the spin control.

Latest changes:
9th June 2017: Set padding to 0 inline for the spin control to avoid conflict with WP 2017 theme, so the value now displays again.
-8th June 2017: Simplified UI. Bugfix in JavaScript port (changed parseInt to Locutus' intval).
-30th May 2017: Ported to JavaScript. Here is the PHP version:
-No more maximum character limit, and the character counter now shows the number of VISIBLE characters only (non-visible characters [e.g. spaces,tabs,linefeeds etc.] are not gradiented).
-Added proper encoding so special characters are allowed and whitespace now no longer graduates the gradient.
-Reverse gradient button and special effects drop down menu.
-Multiple colored gradients now loop smoothly (When the text length is more than the gradient itself, the last color will gradient into the first color instead of abruptly repeating the gradient.)
-2012: Wrote the tool in PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *