Dynamic Colorful jQuery Tag Cloud Plugin – jquery.prettytag

prettyTag let’s you create dynamic colorful cloud tags both in tags input and tags display mode.In addition, this plugin also supports input mode that allows the user to add/remove tags similar to the tagging system.

  • Lightweight File Size.
  • Can be Handle a Large Number of Tags to Set Automatically Color.
  • Attractive Collection of Colors.
  • Option to Randomly Color Each Tag.
  • Provide way to add new tags, input tags append and store in a array with its link.
  • Easy to use and implement.


Load the jQuery JavaScript library, prettyTag JS & CSS file into HTML document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--prettyTag JS-->
<script src="js/jquery.prettytag.js"></script>
<!--prettyTag CSS-->
<link rel="stylesheet" href="css/prertytag.css" />


Create an unordered list of tags with their links in HTML, with the following mentioned class.

<ul class="cloud-tags">
      <li> <a href="#tag_link"> Tag name </a> </li>
      <li> <a href="#tag_link"> Tag name two </a> </li>
      <li> <a href="#tag_link"> iamrohit.in</a> </li>
      <li> <a href="#tag_link"> Codehim.com </a> </li>


And finally call the prettyTag() with class name cloud-tags in document ready function.


Input Tags

<input class="codehim-input-tags" name="tags" type="text" />
<section class="show-input-tags">
<ul class="tags cloud-tags"></ul>

To turn off random color and font awesome tag icon update these value.

    randomColor: false, 
    tagicon: false,

There are three options available to customize the working of this plugin.

randomColor: true, //false to off random color 
   tagicon: true, //false to turn off tags icon
   tagURL: "#", //url that will be assigned to new tags when user enter a tag name

See live demo and download source code.


This awesome plugin is developed by CodeHimBlog. Visit their official github repository for more information and follow for future updates.