{"id":1285,"date":"2025-03-11T19:05:42","date_gmt":"2025-03-11T19:05:42","guid":{"rendered":"https:\/\/toolsblaster.com\/?p=1285"},"modified":"2025-04-20T12:15:36","modified_gmt":"2025-04-20T12:15:36","slug":"rainbow-text-generator","status":"publish","type":"post","link":"https:\/\/toolsblaster.com\/?p=1285","title":{"rendered":"Rainbow Text Generator For You"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1-1024x576.webp\" alt=\"\" class=\"wp-image-1287\" srcset=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1-1024x576.webp 1024w, https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1-300x169.webp 300w, https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1-768x432.webp 768w, https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"on-page-seo-checker\" style=\"background-color: #f4f4f9; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center;\">\n  <h2 style=\"color: #033676; margin-bottom: 15px; font-size: 28px;\">Rainbow Text Generator<\/h2>\n  <p style=\"font-size: 18px; color: #333; line-height: 1.6; margin-bottom: 25px;\">\n    Create beautiful rainbow-colored text for social media, websites, and designs!\n  <\/p>\n\n  \n  <div style=\"background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n    \n    <div style=\"margin-bottom: 25px;\">\n      <label for=\"text-input\" style=\"display: block; text-align: left; margin-bottom: 8px; font-weight: bold; color: #033676;\">Enter Your Text<\/label>\n      <textarea \n        id=\"text-input\" \n        rows=\"3\" \n        placeholder=\"Type your text here to rainbow-fy it!\" \n        style=\"width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; resize: vertical;\"\n      ><\/textarea>\n    <\/div>\n\n    \n    <div style=\"margin-bottom: 25px; padding: 20px; background: #f8f8f8; border-radius: 5px;\">\n      <h3 style=\"color: #033676; margin-top: 0; margin-bottom: 15px;\">Rainbow Preview<\/h3>\n      <div id=\"rainbow-preview\" style=\"font-size: 24px; font-weight: bold; min-height: 60px; word-wrap: break-word; padding: 15px; background: white; border-radius: 5px; border: 1px dashed #ccc;\">\n        Your rainbow text will appear here\n      <\/div>\n    <\/div>\n\n    \n    <div style=\"margin-bottom: 25px;\">\n      <h3 style=\"color: #033676; margin-top: 0; margin-bottom: 15px; text-align: left;\">Rainbow Style Options<\/h3>\n      \n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;\">\n        <div>\n          <label style=\"display: block; margin-bottom: 5px; font-weight: bold; text-align: left;\">Color Mode<\/label>\n          <select id=\"color-mode\" style=\"padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 5px;\">\n            <option value=\"full\">Full Rainbow<\/option>\n            <option value=\"pastel\">Pastel Rainbow<\/option>\n            <option value=\"neon\">Neon Rainbow<\/option>\n            <option value=\"warm\">Warm Colors<\/option>\n            <option value=\"cool\">Cool Colors<\/option>\n          <\/select>\n        <\/div>\n        \n        <div>\n          <label style=\"display: block; margin-bottom: 5px; font-weight: bold; text-align: left;\">Effect<\/label>\n          <select id=\"effect\" style=\"padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 5px;\">\n            <option value=\"per-character\">Per Character<\/option>\n            <option value=\"per-word\">Per Word<\/option>\n            <option value=\"gradient\">Gradient<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n      \n      <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;\">\n        <div>\n          <label style=\"display: block; margin-bottom: 5px; font-weight: bold; text-align: left;\">Font Size<\/label>\n          <select id=\"font-size\" style=\"padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 5px;\">\n            <option value=\"small\">Small<\/option>\n            <option value=\"medium\" selected>Medium<\/option>\n            <option value=\"large\">Large<\/option>\n            <option value=\"xlarge\">Extra Large<\/option>\n          <\/select>\n        <\/div>\n        \n        <div>\n          <label style=\"display: block; margin-bottom: 5px; font-weight: bold; text-align: left;\">Font Weight<\/label>\n          <select id=\"font-weight\" style=\"padding: 8px; width: 100%; border: 1px solid #ccc; border-radius: 5px;\">\n            <option value=\"normal\">Normal<\/option>\n            <option value=\"bold\" selected>Bold<\/option>\n            <option value=\"bolder\">Extra Bold<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    \n    <div style=\"display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;\">\n      <button id=\"generate-btn\" style=\"padding: 12px 25px; background-color: #009dff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; font-weight: bold;\">\n        Generate Rainbow Text\n      <\/button>\n      <button id=\"copy-btn\" style=\"padding: 12px 25px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; font-weight: bold;\">\n        Copy to Clipboard\n      <\/button>\n      <button id=\"reset-btn\" style=\"padding: 12px 25px; background-color: #f44336; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; font-weight: bold;\">\n        Reset\n      <\/button>\n    <\/div>\n\n    \n    <div id=\"code-output\" style=\"margin-top: 25px; display: none; text-align: left;\">\n      <h3 style=\"color: #033676; margin-top: 0; margin-bottom: 15px;\">Code Output<\/h3>\n      <div style=\"background: #f8f8f8; padding: 15px; border-radius: 5px; font-family: monospace; position: relative;\">\n        <button id=\"copy-code\" style=\"position: absolute; top: 10px; right: 10px; padding: 5px 10px; background-color: #033676; color: white; border: none; border-radius: 3px; font-size: 12px; cursor: pointer;\">\n          Copy Code\n        <\/button>\n        <div id=\"html-code\" style=\"margin-bottom: 15px;\">\n          <strong>HTML:<\/strong><br>\n          <code style=\"word-break: break-all;\"><\/code>\n        <\/div>\n        <div id=\"css-code\">\n          <strong>CSS:<\/strong><br>\n          <code style=\"word-break: break-all;\"><\/code>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  \n  <div style=\"margin-top: 30px; background-color: #e6f2ff; padding: 20px; border-radius: 8px; text-align: left;\">\n    <h3 style=\"color: #033676; margin-top: 0;\">How To Use Rainbow Text<\/h3>\n    <ol style=\"padding-left: 20px;\">\n      <li>Enter your text in the input box above<\/li>\n      <li>Customize the rainbow style using the options<\/li>\n      <li>Click &#8220;Generate Rainbow Text&#8221; to see the result<\/li>\n      <li>Copy the text or HTML\/CSS code to use anywhere<\/li>\n    <\/ol>\n    <p style=\"margin-top: 15px;\"><strong>Compatible with:<\/strong> Instagram, Facebook, Twitter, TikTok, Discord, websites, and more!<\/p>\n  <\/div>\n\n  \n  <div style=\"margin-top: 25px;\">\n    <h4 style=\"color: #033676; margin-bottom: 15px;\">Rainbow Text Examples<\/h4>\n    <div style=\"display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;\">\n      <div style=\"background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);\">\n        <div style=\"font-weight: bold; font-size: 20px; background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">\n          Social Media Posts\n        <\/div>\n      <\/div>\n      <div style=\"background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);\">\n        <div style=\"font-weight: bold; font-size: 20px;\">\n          <span style=\"color: #ff9ff3;\">Y<\/span><span style=\"color: #feca57;\">O<\/span><span style=\"color: #ff6b6b;\">U<\/span><span style=\"color: #48dbfb;\">R<\/span> <span style=\"color: #1dd1a1;\">N<\/span><span style=\"color: #f368e0;\">A<\/span><span style=\"color: #ff9f43;\">M<\/span><span style=\"color: #0abde3;\">E<\/span>\n        <\/div>\n      <\/div>\n      <div style=\"background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);\">\n        <div style=\"font-weight: bold; font-size: 20px; background: linear-gradient(to right, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">\n          Pastel Rainbow\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  \n  <div style=\"margin-top: 30px;\">\n    <p style=\"font-size: 18px; color: #333; line-height: 1.6;\">\n      <strong>Explore More Tools:<\/strong><br>\n      <a href=\"https:\/\/www.toolsblaster.com\/?page_id=1548\" style=\"color: #009dff; text-decoration: none;\">About Us<\/a> | \n      <a href=\"https:\/\/www.toolsblaster.com\/?cat=12\" style=\"color: #009dff; text-decoration: none;\">Top Tools<\/a> | \n      <a href=\"https:\/\/www.toolsblaster.com\/?page_id=1554\" style=\"color: #009dff; text-decoration: none;\">Contact<\/a> \n    <\/p>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ DOM Elements\n  const textInput = document.getElementById('text-input');\n  const rainbowPreview = document.getElementById('rainbow-preview');\n  const colorMode = document.getElementById('color-mode');\n  const effect = document.getElementById('effect');\n  const fontSize = document.getElementById('font-size');\n  const fontWeight = document.getElementById('font-weight');\n  const generateBtn = document.getElementById('generate-btn');\n  const copyBtn = document.getElementById('copy-btn');\n  const resetBtn = document.getElementById('reset-btn');\n  const codeOutput = document.getElementById('code-output');\n  const htmlCode = document.getElementById('html-code').querySelector('code');\n  const cssCode = document.getElementById('css-code').querySelector('code');\n  const copyCodeBtn = document.getElementById('copy-code');\n\n  \/\/ Color Palettes\n  const colorPalettes = {\n    full: ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'],\n    pastel: ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1', '#f368e0', '#ff9f43'],\n    neon: ['#ff00ff', '#00ffff', '#ffff00', '#ff00aa', '#aa00ff', '#00ffaa', '#ff5500'],\n    warm: ['#ff0000', '#ff4000', '#ff8000', '#ffbf00', '#ffff00', '#ffcc00', '#ff9900'],\n    cool: ['#0000ff', '#0040ff', '#0080ff', '#00bfff', '#00ffff', '#00ccff', '#0099ff']\n  };\n\n  \/\/ Event Listeners\n  generateBtn.addEventListener('click', generateRainbowText);\n  copyBtn.addEventListener('click', copyToClipboard);\n  resetBtn.addEventListener('click', resetTool);\n  copyCodeBtn.addEventListener('click', copyCodeToClipboard);\n  \n  \/\/ Auto-generate when options change\n  [colorMode, effect, fontSize, fontWeight].forEach(el => {\n    el.addEventListener('change', generateRainbowText);\n  });\n\n  \/\/ Generate rainbow text\n  function generateRainbowText() {\n    const text = textInput.value.trim();\n    if (!text) {\n      rainbowPreview.innerHTML = 'Enter some text to generate rainbow text!';\n      codeOutput.style.display = 'none';\n      return;\n    }\n    \n    const palette = colorPalettes[colorMode.value];\n    const effectType = effect.value;\n    const size = fontSize.value;\n    const weight = fontWeight.value;\n    \n    \/\/ Apply font styles\n    rainbowPreview.style.fontSize = getFontSize(size);\n    rainbowPreview.style.fontWeight = weight;\n    \n    let html = '';\n    let css = '';\n    let previewHtml = '';\n    \n    if (effectType === 'gradient') {\n      \/\/ Gradient effect\n      const gradientColors = palette.join(', ');\n      previewHtml = `<span style=\"background: linear-gradient(to right, ${gradientColors}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: ${weight}; font-size: ${getFontSize(size)}\">${escapeHtml(text)}<\/span>`;\n      \n      html = `&lt;span class=\"rainbow-text\"&gt;${escapeHtml(text)}&lt;\/span&gt;`;\n      css = `.rainbow-text {\n  background: linear-gradient(to right, ${gradientColors});\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  font-weight: ${weight};\n  font-size: ${getFontSize(size)};\n}`;\n    } else {\n      \/\/ Per character or per word\n      const splitText = effectType === 'per-character' ? text.split('') : text.split(' ');\n      let colorIndex = 0;\n      \n      previewHtml = splitText.map(segment => {\n        const color = palette[colorIndex % palette.length];\n        colorIndex++;\n        return `<span style=\"color: ${color}; font-weight: ${weight}; font-size: ${getFontSize(size)}\">${escapeHtml(effectType === 'per-character' ? segment : segment + ' ')}<\/span>`;\n      }).join('');\n      \n      \/\/ Generate HTML\/CSS code\n      if (effectType === 'per-character') {\n        html = text.split('').map((char, index) => {\n          const color = palette[index % palette.length];\n          return `&lt;span style=\"color: ${color}\"&gt;${escapeHtml(char)}&lt;\/span&gt;`;\n        }).join('');\n      } else {\n        html = text.split(' ').map((word, index) => {\n          const color = palette[index % palette.length];\n          return `&lt;span style=\"color: ${color}\"&gt;${escapeHtml(word)}&lt;\/span&gt; `;\n        }).join('');\n      }\n      \n      css = `.rainbow-text span {\n  font-weight: ${weight};\n  font-size: ${getFontSize(size)};\n}`;\n    }\n    \n    rainbowPreview.innerHTML = previewHtml;\n    \n    \/\/ Show code output\n    htmlCode.textContent = html;\n    cssCode.textContent = css;\n    codeOutput.style.display = 'block';\n  }\n\n  function getFontSize(size) {\n    switch(size) {\n      case 'small': return '16px';\n      case 'medium': return '24px';\n      case 'large': return '32px';\n      case 'xlarge': return '48px';\n      default: return '24px';\n    }\n  }\n\n  function copyToClipboard() {\n    const range = document.createRange();\n    range.selectNode(rainbowPreview);\n    window.getSelection().removeAllRanges();\n    window.getSelection().addRange(range);\n    document.execCommand('copy');\n    window.getSelection().removeAllRanges();\n    \n    \/\/ Show copied feedback\n    const originalText = copyBtn.textContent;\n    copyBtn.textContent = 'Copied!';\n    setTimeout(() => {\n      copyBtn.textContent = originalText;\n    }, 2000);\n  }\n\n  function copyCodeToClipboard() {\n    const code = `HTML:\\n${htmlCode.textContent}\\n\\nCSS:\\n${cssCode.textContent}`;\n    navigator.clipboard.writeText(code)\n      .then(() => {\n        copyCodeBtn.textContent = 'Copied!';\n        setTimeout(() => {\n          copyCodeBtn.textContent = 'Copy Code';\n        }, 2000);\n      });\n  }\n\n  function resetTool() {\n    textInput.value = '';\n    rainbowPreview.innerHTML = 'Your rainbow text will appear here';\n    rainbowPreview.style.fontSize = '24px';\n    rainbowPreview.style.fontWeight = 'bold';\n    colorMode.value = 'full';\n    effect.value = 'per-character';\n    fontSize.value = 'medium';\n    fontWeight.value = 'bold';\n    codeOutput.style.display = 'none';\n  }\n\n  function escapeHtml(unsafe) {\n    return unsafe\n      .replace(\/&\/g, \"&amp;\")\n      .replace(\/<\/g, \"&lt;\")\n      .replace(\/>\/g, \"&gt;\")\n      .replace(\/\"\/g, \"&quot;\")\n      .replace(\/'\/g, \"&#039;\");\n  }\n\n  \/\/ Initialize with example if empty\n  textInput.addEventListener('focus', function() {\n    if (!this.value) {\n      this.value = 'Make your text colorful!';\n      generateRainbowText();\n    }\n  });\n<\/script>\n<img src=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1.webp\" class=\"ss-hidden-pin-image\" alt=\"\" data-pin-url=\"https:\/\/toolsblaster.com\/?p=1285\" data-pin-media=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1.webp\" data-pin-description=\"Rainbow Text Generator For You\"\/>","protected":false},"excerpt":{"rendered":"<p>Rainbow Text Generator Create beautiful rainbow-colored text for social media, websites, and designs! Enter Your Text Rainbow Preview Your rainbow text will appear here Rainbow Style Options Color Mode Full&hellip;<\/p>\n<img src=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1.webp\" class=\"ss-hidden-pin-image\" alt=\"\" data-pin-url=\"https:\/\/toolsblaster.com\/?p=1285\" data-pin-media=\"https:\/\/toolsblaster.com\/wp-content\/uploads\/2025\/03\/40-1.webp\" data-pin-description=\"Rainbow Text Generator For You\"\/>","protected":false},"author":1,"featured_media":1287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAowgIyDCw:productID":"","_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-top-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/1285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1285"}],"version-history":[{"count":5,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/1285\/revisions"}],"predecessor-version":[{"id":1734,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/posts\/1285\/revisions\/1734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=\/wp\/v2\/media\/1287"}],"wp:attachment":[{"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toolsblaster.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69bf98c646fa5cd27b394b49. Config Timestamp: 2026-03-22 07:22:45 UTC, Cached Timestamp: 2026-04-17 13:46:01 UTC -->