{"id":592,"date":"2026-03-20T00:00:20","date_gmt":"2026-03-20T00:00:20","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=592"},"modified":"2026-04-06T10:05:26","modified_gmt":"2026-04-06T10:05:26","slug":"rainbow-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/it\/rainbow-text-generator\/","title":{"rendered":"Rainbow Text Generator \u2013 Colorize Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- START OF FILE Rainbow Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-rainbow-wrapper {\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        \r\n        --theme-panel: rgba(20, 10, 40, 0.96);\r\n        --theme-panel-hover: rgba(30, 15, 55, 0.98);\r\n        --theme-bg-alt: rgba(15, 8, 30, 0.92);\r\n        --theme-border: rgba(120, 60, 180, 0.35);\r\n        \r\n        --rain-red: #ff4d4d;\r\n        --rain-orange: #ff9f43;\r\n        --rain-yellow: #feca57;\r\n        --rain-green: #1dd1a1;\r\n        --rain-blue: #54a0ff;\r\n        --rain-purple: #5f27cd;\r\n        --rain-pink: #ff6b81;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c8b6e6;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-rainbow: linear-gradient(90deg, #ff4d4d, #ff9f43, #feca57, #1dd1a1, #54a0ff, #5f27cd, #ff6b81, #ff4d4d);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);\r\n        \r\n        --glow-rainbow: 0 0 25px rgba(85, 160, 255, 0.5);\r\n        --shadow-ui: 0 15px 40px rgba(0, 0, 0, 0.7);\r\n        --shadow-card: 0 6px 20px rgba(95, 39, 205, 0.4);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-rainbow-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* INCREASED CONTAINER WIDTH *\/\r\n    .pg-rainbow-container {\r\n        max-width: 1250px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-rainbow-hero {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-rainbow-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3rem;\r\n        font-weight: 900;\r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        letter-spacing: -1px;\r\n        color: #ffffff;\r\n        text-shadow: 0 4px 15px rgba(0,0,0,0.5);\r\n        max-width: 1100px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: all 0.35s ease;\r\n    }\r\n    \r\n    .pg-rainbow-title i {\r\n        color: #ffffff;\r\n        border-radius: 16px;\r\n        padding: 14px;\r\n        font-size: 2.2rem;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));\r\n        transition: transform 0.3s ease;\r\n        animation: rainbow-shift 4s linear infinite;\r\n    }\r\n    \r\n    .pg-rainbow-title:hover i {\r\n        transform: rotate(20deg) scale(1.15);\r\n    }\r\n\r\n    .pg-rainbow-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 80px;\r\n        height: 4px;\r\n        background: #ffffff;\r\n        border-radius: 4px;\r\n        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\r\n        transition: all 0.35s ease;\r\n    }\r\n    \r\n    .pg-rainbow-title:hover::after {\r\n        width: 180px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n    }\r\n\r\n    @keyframes rainbow-shift {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 200% 50%; }\r\n    }\r\n    \r\n    .pg-rainbow-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.2rem;\r\n        color: rgba(255, 255, 255, 0.88);\r\n        max-width: 950px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        text-shadow: 0 2px 8px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    .pg-rainbow-main-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        border: 1px solid var(--theme-border);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 18px;\r\n        position: relative;\r\n        overflow: visible;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .pg-rainbow-main-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 4px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        border-radius: 4px 4px 0 0;\r\n    }\r\n\r\n    .pg-rainbow-header {\r\n        padding: 22px 28px;\r\n        border-bottom: 1px solid var(--theme-border);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 18px;\r\n        background: rgba(95, 39, 205, 0.1);\r\n        border-radius: 18px 18px 0 0;\r\n    }\r\n\r\n    .pg-rainbow-avatar {\r\n        width: 54px;\r\n        height: 54px;\r\n        border-radius: 50%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.5rem;\r\n        color: #000;\r\n        box-shadow: 0 0 15px rgba(255, 100, 200, 0.5);\r\n        transition: transform 0.3s ease;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .pg-rainbow-header:hover .pg-rainbow-avatar { transform: rotate(360deg) scale(1.1); }\r\n\r\n    .pg-rainbow-header-text {\r\n        font-weight: 700;\r\n        font-size: 1.3rem;\r\n        color: #ffffff;\r\n        letter-spacing: 0.3px;\r\n    }\r\n\r\n    .pg-rainbow-input-area {\r\n        padding: 28px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 18px;\r\n        background: var(--theme-bg-alt);\r\n    }\r\n\r\n    .pg-rainbow-textarea {\r\n        width: 100% !important;\r\n        min-height: 150px !important;\r\n        padding: 24px 26px !important;\r\n        background: rgba(0, 0, 0, 0.4) !important;\r\n        border: 1px solid var(--theme-border) !important;\r\n        border-left: 4px solid var(--rain-blue) !important;\r\n        color: #ffffff !important;\r\n        font-family: var(--primary-font) !important;\r\n        font-weight: 500 !important;\r\n        font-size: 1.65rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: vertical;\r\n        border-radius: 12px;\r\n        transition: all 0.3s ease;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .pg-rainbow-textarea:focus {\r\n        border-color: var(--rain-pink) !important;\r\n        box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.25) !important;\r\n        background: rgba(0, 0, 0, 0.5) !important;\r\n    }\r\n    \r\n    .pg-rainbow-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }\r\n\r\n    .pg-rainbow-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        padding: 16px 20px;\r\n        border: 1px solid var(--theme-border);\r\n        border-radius: 10px;\r\n        background: rgba(95, 39, 205, 0.1);\r\n    }\r\n\r\n    .pg-rainbow-tool-group {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-rainbow-btn {\r\n        background: transparent;\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 10px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .pg-rainbow-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%;\r\n        width: 100%; height: 100%;\r\n        background: var(--grad-shimmer);\r\n        transition: left 0.4s ease;\r\n    }\r\n    \r\n    .pg-rainbow-btn:hover {\r\n        background: rgba(95, 39, 205, 0.25);\r\n        color: #ffffff;\r\n        border-color: var(--rain-blue);\r\n        box-shadow: 0 0 15px rgba(84, 160, 255, 0.4);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-rainbow-btn:hover::before { left: 100%; }\r\n\r\n    .pg-rainbow-btn.primary-btn {\r\n        color: var(--rain-yellow);\r\n        background: rgba(254, 202, 87, 0.15);\r\n        border-color: var(--rain-yellow);\r\n    }\r\n    \r\n    .pg-rainbow-btn.primary-btn:hover {\r\n        background: rgba(254, 202, 87, 0.3);\r\n        box-shadow: 0 0 15px rgba(254, 202, 87, 0.4);\r\n    }\r\n\r\n    .pg-rainbow-btn:active { transform: scale(0.96); }\r\n\r\n    .pg-rainbow-preset {\r\n        background: rgba(0,0,0,0.35);\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 10px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: all 0.25s ease;\r\n        min-width: 180px;\r\n    }\r\n    \r\n    .pg-rainbow-preset:hover, .pg-rainbow-preset:focus {\r\n        background: rgba(95, 39, 205, 0.3);\r\n        color: var(--rain-yellow);\r\n        border-color: var(--rain-green);\r\n    }\r\n    \r\n    .pg-rainbow-preset option {\r\n        background: var(--theme-panel);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .pg-rainbow-settings {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 24px;\r\n        padding: 26px 24px;\r\n        background: var(--theme-panel);\r\n        border-top: 1px solid var(--theme-border);\r\n    }\r\n\r\n    .pg-rainbow-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.92rem;\r\n        font-weight: 700;\r\n        color: #ffffff;\r\n        margin-bottom: 12px;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .pg-rainbow-label i {\r\n        color: var(--rain-blue);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-rainbow-options {\r\n        display: grid;\r\n        gap: 10px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid transparent;\r\n        padding: 14px 10px;\r\n        color: #ffffff;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.82rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: all 0.25s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn i {\r\n        font-size: 1.2rem;\r\n        color: var(--text-muted);\r\n        transition: all 0.25s ease;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0; left: 0; width: 0%; height: 3px;\r\n        background: var(--grad-rainbow);\r\n        transition: width 0.3s ease;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn:hover::after { width: 100%; }\r\n    \r\n    .pg-rainbow-opt-btn:hover {\r\n        background: rgba(95, 39, 205, 0.25);\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn:hover i {\r\n        color: var(--rain-yellow);\r\n        transform: scale(1.15);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn.active {\r\n        background: rgba(95, 39, 205, 0.45);\r\n        color: #ffffff;\r\n        border-color: var(--rain-purple);\r\n        box-shadow: 0 0 15px rgba(95, 39, 205, 0.5);\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn.active::after { width: 100%; }\r\n    \r\n    .pg-rainbow-opt-btn.active i { color: var(--rain-green); }\r\n\r\n    .pg-rainbow-results {\r\n        padding: 40px 0;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    \r\n    .pg-rainbow-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-rainbow-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border);\r\n        border-left: 4px solid transparent;\r\n        padding: 0;\r\n        transition: all 0.35s ease;\r\n        position: relative;\r\n        overflow: visible;\r\n        border-radius: 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        box-shadow: var(--shadow-card);\r\n        min-height: auto;\r\n    }\r\n    \r\n    .pg-rainbow-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 3px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        border-radius: 4px 4px 0 0;\r\n    }\r\n    \r\n    .pg-rainbow-card:hover {\r\n        transform: translateX(4px);\r\n        border-color: rgba(95, 39, 205, 0.6);\r\n        border-left-color: var(--rain-purple);\r\n        box-shadow: 0 8px 25px rgba(95, 39, 205, 0.5), 0 4px 12px rgba(0, 0, 0, 0.6);\r\n    }\r\n    \r\n    .pg-rainbow-card:hover::before { opacity: 1; }\r\n\r\n    .pg-rainbow-card-inner {\r\n        display: flex;\r\n        align-items: center;\r\n        width: 100%;\r\n        padding: 20px 24px;\r\n        gap: 18px;\r\n    }\r\n\r\n    .pg-rainbow-card-avatar {\r\n        width: 46px;\r\n        height: 46px;\r\n        border-radius: 50%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #000;\r\n        font-size: 1.15rem;\r\n        flex-shrink: 0;\r\n        box-shadow: 0 0 12px rgba(255, 100, 200, 0.4);\r\n    }\r\n\r\n    .pg-rainbow-card-content {\r\n        flex: 1;\r\n        min-width: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-rainbow-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.92rem;\r\n        font-weight: 700;\r\n        color: #ffffff;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    .pg-rainbow-card-preview {\r\n        font-size: 1.3rem;\r\n        color: var(--rain-yellow);\r\n        text-align: left;\r\n        font-family: var(--primary-font);\r\n        font-weight: 600;\r\n        position: relative;\r\n        z-index: 1;\r\n        transition: all 0.3s ease;\r\n        white-space: normal !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.5 !important;\r\n        max-height: 85px;\r\n        overflow-y: auto;\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--rain-purple) transparent;\r\n    }\r\n    \r\n    .pg-rainbow-card-preview::-webkit-scrollbar { width: 5px; }\r\n    .pg-rainbow-card-preview::-webkit-scrollbar-track { background: transparent; }\r\n    .pg-rainbow-card-preview::-webkit-scrollbar-thumb { background: var(--rain-purple); border-radius: 3px; }\r\n    \r\n    .pg-rainbow-card:hover .pg-rainbow-card-preview { color: #ffffff; }\r\n\r\n    .pg-rainbow-card-copy-btn {\r\n        background: transparent;\r\n        border: 1px solid var(--theme-border);\r\n        color: var(--text-muted);\r\n        width: 42px;\r\n        height: 42px;\r\n        min-width: 42px;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        margin-left: auto;\r\n    }\r\n    \r\n    .pg-rainbow-card-copy-btn i { font-size: 1.1rem; transition: all 0.25s ease; }\r\n    \r\n    .pg-rainbow-card-copy-btn:hover {\r\n        background: var(--rain-purple);\r\n        color: #ffffff;\r\n        border-color: var(--rain-purple);\r\n        box-shadow: var(--glow-rainbow);\r\n        transform: scale(1.1) rotate(10deg);\r\n    }\r\n    \r\n    .pg-rainbow-card-copy-btn:hover i { transform: scale(1.2); }\r\n    \r\n    .pg-rainbow-card-copy-btn:active { transform: scale(0.9); }\r\n    \r\n    .pg-rainbow-card-copy-btn.copied {\r\n        background: var(--rain-green) !important;\r\n        color: #000 !important;\r\n        border-color: var(--rain-green) !important;\r\n        box-shadow: 0 0 15px rgba(29, 209, 161, 0.6) !important;\r\n    }\r\n\r\n    .pg-rainbow-card-footer {\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        gap: 12px;\r\n        padding: 12px 24px;\r\n        border-top: 1px solid rgba(95, 39, 205, 0.2);\r\n        color: var(--text-muted);\r\n        font-size: 0.78rem;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .pg-rainbow-card-action {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        cursor: pointer;\r\n        transition: color 0.2s ease;\r\n    }\r\n    .pg-rainbow-card-action:hover { color: var(--rain-blue); }\r\n    .pg-rainbow-card-action:hover i { transform: scale(1.2); }\r\n    .pg-rainbow-card-action i { transition: transform 0.2s ease; }\r\n\r\n    \/* LOAD MORE BUTTON - WHITE TEXT *\/\r\n    .pg-rainbow-load-btn {\r\n        background: var(--theme-panel);\r\n        color: #ffffff;\r\n        border: 2px solid #ffffff;\r\n        padding: 15px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        font-size: 1.05rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        border-radius: 12px;\r\n        transition: all 0.3s ease;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-rainbow-load-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 2s linear infinite;\r\n        transition: left 0.5s ease;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-rainbow-load-btn span, .pg-rainbow-load-btn i { position: relative; z-index: 1; }\r\n    \r\n    .pg-rainbow-load-btn:hover {\r\n        color: #000;\r\n        border-color: transparent;\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 0 35px rgba(255, 255, 255, 0.5);\r\n    }\r\n    \r\n    .pg-rainbow-load-btn:hover::before { left: 0; }\r\n    .pg-rainbow-load-btn:hover i { transform: translateY(5px) rotate(180deg); }\r\n    .pg-rainbow-load-btn:active { transform: translateY(0); }\r\n\r\n    .pg-rainbow-toast {\r\n        visibility: hidden;\r\n        background: rgba(15, 8, 30, 0.98);\r\n        color: var(--rain-green);\r\n        padding: 16px 26px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(25px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        box-shadow: 0 12px 35px rgba(0,0,0,0.8);\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        border: 1px solid var(--rain-green);\r\n    }\r\n    \r\n    .pg-rainbow-toast i {\r\n        color: #000;\r\n        background: var(--rain-green);\r\n        border-radius: 50%;\r\n        padding: 5px;\r\n        font-size: 1rem;\r\n    }\r\n    \r\n    .pg-rainbow-toast.show {\r\n        visibility: visible;\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-rainbow-container { max-width: 900px !important; }\r\n        .pg-rainbow-title { font-size: 2.4rem; }\r\n        .pg-rainbow-settings { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-rainbow-container { padding: 30px 15px !important; max-width: 100% !important; }\r\n        .pg-rainbow-results { padding: 25px 0; }\r\n        .pg-rainbow-settings { padding: 18px; gap: 18px; }\r\n        .pg-rainbow-input-area { padding: 18px; }\r\n        .pg-rainbow-textarea { min-height: 130px !important; font-size: 1.35rem !important; padding: 16px 18px !important; }\r\n        \r\n        .pg-rainbow-toolbar { flex-direction: column; align-items: stretch; }\r\n        .pg-rainbow-tool-group { justify-content: center; }\r\n        .pg-rainbow-preset { width: 100%; text-align: center; min-width: auto; }\r\n        \r\n        .pg-rainbow-card-inner { padding: 16px 18px; gap: 14px; }\r\n        .pg-rainbow-card-avatar { width: 38px; height: 38px; font-size: 0.95rem; }\r\n        .pg-rainbow-card-preview { font-size: 1.15rem; max-height: 75px; }\r\n        .pg-rainbow-card-footer { padding: 10px 18px; justify-content: center; flex-wrap: wrap; }\r\n        \r\n        .pg-rainbow-opt-btn { padding: 12px 8px; font-size: 0.78rem; }\r\n        .pg-rainbow-load-btn { padding: 13px 28px; font-size: 0.95rem; width: 100%; justify-content: center; }\r\n        .pg-rainbow-title { font-size: 1.9rem; }\r\n        .pg-rainbow-subtitle { font-size: 0.95rem; }\r\n        .pg-rainbow-header { padding: 18px; }\r\n        .pg-rainbow-avatar { width: 46px; height: 46px; font-size: 1.2rem; }\r\n        .pg-rainbow-card-copy-btn { width: 36px; height: 36px; min-width: 36px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-rainbow-wrapper\" id=\"pg-rainbow-tool\">\r\n    <div class=\"pg-rainbow-container pg-rainbow-hero\">\r\n        <h1 class=\"pg-rainbow-title\"><i class=\"fa-solid fa-rainbow\"><\/i> Rainbow Text Generator \u2013 Colorize Instantly<\/h1>\r\n        <p class=\"pg-rainbow-subtitle\">Transform text into vibrant rainbow patterns using Unicode symbols, segmented cycles, and gothic displays. Perfect for eye-catching social media, bios, and creative messaging.<\/p>\r\n        \r\n        <div class=\"pg-rainbow-main-card\">\r\n            <div class=\"pg-rainbow-header\">\r\n                <div class=\"pg-rainbow-avatar\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                <div class=\"pg-rainbow-header-text\">Create Colorful Text<\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-rainbow-input-area\">\r\n                <textarea class=\"pg-rainbow-textarea\" id=\"pgRainbowInput\" placeholder=\"Enter text to paint with colors...\"><\/textarea>\r\n                \r\n                <div class=\"pg-rainbow-toolbar\">\r\n                    <div class=\"pg-rainbow-tool-group\">\r\n                        <button class=\"pg-rainbow-btn\" id=\"pgRainbowPaste\" title=\"Paste\"><i class=\"fa-solid fa-clipboard\"><\/i> Paste<\/button>\r\n                        <button class=\"pg-rainbow-btn\" id=\"pgRainbowSelect\" title=\"Select\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                        <button class=\"pg-rainbow-btn primary-btn\" id=\"pgRainbowCopyBase\" title=\"Copy Base\"><i class=\"fa-regular fa-copy\"><\/i> Copy<\/button>\r\n                    <\/div>\r\n                    \r\n                    <select class=\"pg-rainbow-preset\" id=\"pgRainbowPreset\">\r\n                        <option value=\"\" disabled selected>\ud83c\udf08 Rainbow Presets<\/option>\r\n                        <option value=\"Living in full color \u2728\">\u2728 Vibrant Vibes<\/option>\r\n                        <option value=\"Rainbow Magic\">\ud83e\udd84 Magic Mode<\/option>\r\n                        <option value=\"Color Me Happy\">\ud83c\udfa8 Happy Colors<\/option>\r\n                        <option value=\"Spectrum Text Art\">\ud83c\udf0a Spectrum Art<\/option>\r\n                        <option value=\"Prism Effect\">\ud83d\udd2e Prism Glow<\/option>\r\n                        <option value=\"Chromatic Text\">\ud83d\udc8e Chromatic<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-rainbow-settings\">\r\n                <div>\r\n                    <div class=\"pg-rainbow-label\"><i class=\"fa-solid fa-text-height\"><\/i> Rainbow Style<\/div>\r\n                    <div class=\"pg-rainbow-options\">\r\n                        <button class=\"pg-rainbow-opt-btn style-btn active\" data-mode=\"Symbols\">\r\n                            <i class=\"fa-solid fa-icons\"><\/i> Symbol Rainbow\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Segmented\">\r\n                            <i class=\"fa-solid fa-layer-group\"><\/i> Segmented\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Gothic\">\r\n                            <i class=\"fa-solid fa-chess-rook\"><\/i> Gothic\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Cycled\">\r\n                            <i class=\"fa-solid fa-repeat\"><\/i> Cycled\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-rainbow-label\"><i class=\"fa-solid fa-sliders\"><\/i> Pattern Density<\/div>\r\n                    <div class=\"pg-rainbow-options\">\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn active\" data-deco=\"Light\">\r\n                            <i class=\"fa-solid fa-sun\"><\/i> Light\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Medium\">\r\n                            <i class=\"fa-solid fa-cloud-sun\"><\/i> Medium\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Heavy\">\r\n                            <i class=\"fa-solid fa-cloud-showers-heavy\"><\/i> Heavy\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Max\">\r\n                            <i class=\"fa-solid fa-star\"><\/i> Maximum\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pg-rainbow-results\">\r\n            <div class=\"pg-rainbow-grid\" id=\"pgRainbowGrid\"><\/div>\r\n            <button class=\"pg-rainbow-load-btn\" id=\"pgRainbowLoadBtn\"><span>Load More Styles<\/span> <i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgRainbowToast\" class=\"pg-rainbow-toast\"><i class=\"fa-solid fa-check\"><\/i> <span>Copied!<\/span><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-rainbow-tool');\r\n    const input = wrapper.querySelector('#pgRainbowInput');\r\n    const grid = wrapper.querySelector('#pgRainbowGrid');\r\n    const loadBtn = wrapper.querySelector('#pgRainbowLoadBtn');\r\n    const toast = wrapper.querySelector('#pgRainbowToast');\r\n    const pasteBtn = wrapper.querySelector('#pgRainbowPaste');\r\n    const selectBtn = wrapper.querySelector('#pgRainbowSelect');\r\n    const copyBase = wrapper.querySelector('#pgRainbowCopyBase');\r\n    const presetSel = wrapper.querySelector('#pgRainbowPreset');\r\n\r\n    let currentMode = 'Symbols';\r\n    let currentDeco = 'Light';\r\n    let limit = 8;\r\n    const INCREMENT = 8;\r\n    const TOTAL = 112;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const baseArr = Array.from(base);\r\n\r\n    const symbols = ['\u2728','\ud83c\udf1f','\ud83d\udcab','\u2b50','\ud83c\udf38','\ud83c\udf3a','\ud83c\udf3b','\ud83c\udf3c','\ud83e\udd8b','\ud83d\udd25','\ud83d\udc96','\ud83d\udc8e','\ud83c\udf08','\ud83c\udf88','\ud83c\udf40','\ud83c\udf0a','\ud83c\udfb5','\ud83c\udfb6','\ud83d\udc9c','\ud83d\udc99','\ud83d\udc9a','\ud83d\udc9b','\ud83e\udde1','\u2764\ufe0f'];\r\n    const accents = ['\u0302','\u0303','\u030c','\u0304','\u0306','\u0307','\u0308','\u030b','\u0304','\u0301','\u0300','\u0302','\u0303','\u030c'];\r\n    \r\n    const gothicMap = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const gothicArr = Array.from(gothicMap);\r\n\r\n    const scriptMap = \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\u212c\ud835\udc9e\ud835\udc9f\u2130\u2131\ud835\udca2\u210b\u2110\ud835\udca5\ud835\udca6\u2112\u2133\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\u211b\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb50123456789\";\r\n    const scriptArr = Array.from(scriptMap);\r\n\r\n    const transformText = (txt, mode, deco, idx) => {\r\n        if(!txt) return \"\";\r\n        const densityMap = { 'Light': 1, 'Medium': 2, 'Heavy': 3, 'Max': 5 };\r\n        const density = densityMap[deco] || 1;\r\n        \r\n        let out = '';\r\n        \r\n        if(mode === 'Symbols') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                const sym = symbols[(i + idx) % symbols.length];\r\n                return sym + c;\r\n            }).join('');\r\n        } else if(mode === 'Segmented') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                const acc = accents[(i + idx) % accents.length];\r\n                let result = c + acc;\r\n                for(let d=1; d<density; d++) result += accents[(i + d + idx) % accents.length];\r\n                return result;\r\n            }).join('');\r\n        } else if(mode === 'Gothic') {\r\n            out = Array.from(txt).map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? gothicArr[i] : c;\r\n            }).join('');\r\n            out = Array.from(out).map((c, i) => {\r\n                if(i % (4-density) === 0 && c !== ' ') return c + accents[(i+idx) % accents.length];\r\n                return c;\r\n            }).join('');\r\n        } else if(mode === 'Cycled') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                let result = c;\r\n                for(let d=0; d<density; d++) {\r\n                    result += symbols[(i + d + idx) % symbols.length];\r\n                }\r\n                return result;\r\n            }).join('');\r\n        }\r\n        \r\n        return out;\r\n    };\r\n\r\n    const copyText = (txt, btn) => {\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n            navigator.clipboard.writeText(txt).then(() => showToast(btn));\r\n        } else {\r\n            const ta = document.createElement(\"textarea\");\r\n            ta.value = txt;\r\n            ta.style.cssText = \"position:fixed;top:0;left:0;opacity:0;pointer-events:none;\";\r\n            document.body.appendChild(ta);\r\n            ta.select();\r\n            try { document.execCommand('copy'); showToast(btn); } catch(e) { console.error(e); }\r\n            document.body.removeChild(ta);\r\n        }\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.classList.add('copied');\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            setTimeout(() => {\r\n                btn.classList.remove('copied');\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n            }, 1400);\r\n        }\r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1400);\r\n    };\r\n\r\n    const genMeta = () => {\r\n        const names = [\r\n            'Vivid Rainbow', 'Symbol Spectrum', 'Gothic Glow', 'Prism Mix',\r\n            'Color Wave', 'Chromatic Cycle', 'Segmented Glow', 'Heavy Rain',\r\n            'Soft Pastel', 'Bright Burst', 'Neon Prism', 'Crystal Mix',\r\n            'Magic Spectrum', 'Vivid Cycle', 'Dark Gothic', 'Light Spark',\r\n            'Rainbow Wave', 'Color Burst', 'Gothic Prism', 'Symbol Glow',\r\n            'Vivid Mix', 'Chromatic Spark', 'Prism Wave', 'Segmented Mix'\r\n        ];\r\n        const icons = ['fa-rainbow', 'fa-icons', 'fa-chess-rook', 'fa-prism', 'fa-sun', 'fa-moon', 'fa-star', 'fa-heart', 'fa-gem', 'fa-leaf', 'fa-bolt', 'fa-droplet', 'fa-wand-sparkles', 'fa-palette', 'fa-umbrella', 'fa-cloud-sun'];\r\n        \r\n        const list = [];\r\n        for(let i=0; i<TOTAL; i++) {\r\n            const times = ['Just now', '1s ago', '5s ago', '10s ago', '20s ago', '30s ago', '1m ago', '3m ago', '5m ago', '10m ago'];\r\n            list.push({\r\n                id: `rainbow-${i}`,\r\n                name: `${names[i % names.length]} #${Math.floor(i\/names.length)+1}`,\r\n                time: times[i % times.length],\r\n                icon: icons[i % icons.length]\r\n            });\r\n        }\r\n        return list;\r\n    };\r\n\r\n    const allMeta = genMeta();\r\n\r\n    const render = () => {\r\n        grid.innerHTML = '';\r\n        const raw = input.value || \"Rainbow Magic! \ud83c\udf08\";\r\n        const show = allMeta.slice(0, limit);\r\n        \r\n        show.forEach((meta, idx) => {\r\n            const out = transformText(raw, currentMode, currentDeco, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-rainbow-card';\r\n            card.innerHTML = `\r\n                <div class=\"pg-rainbow-card-inner\">\r\n                    <div class=\"pg-rainbow-card-avatar\"><i class=\"fa-solid ${meta.icon}\"><\/i><\/div>\r\n                    <div class=\"pg-rainbow-card-content\">\r\n                        <div class=\"pg-rainbow-card-title\">${meta.name}<\/div>\r\n                        <div class=\"pg-rainbow-card-preview\">${out}<\/div>\r\n                    <\/div>\r\n                    <button class=\"pg-rainbow-card-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-rainbow-card-footer\">\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-regular fa-heart\"><\/i> Like<\/div>\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-regular fa-bookmark\"><\/i> Save<\/div>\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-solid fa-share-nodes\"><\/i> Share<\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-rainbow-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                copyText(out, copyBtn);\r\n            });\r\n            \r\n            grid.appendChild(card);\r\n        });\r\n        \r\n        const remaining = Math.max(0, TOTAL - limit);\r\n        if(remaining > 0) {\r\n            loadBtn.style.display = 'inline-flex';\r\n            loadBtn.querySelector('span').textContent = `Load More Styles (${remaining})`;\r\n        } else {\r\n            loadBtn.style.display = 'none';\r\n        }\r\n    };\r\n\r\n    input.addEventListener('input', render);\r\n    \r\n    pasteBtn.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const t = await navigator.clipboard.readText();\r\n            input.value = t;\r\n            render();\r\n        } catch {\r\n            input.focus();\r\n        }\r\n    });\r\n\r\n    selectBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        input.select();\r\n    });\r\n\r\n    copyBase.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(input.value) copyText(input.value, null);\r\n    });\r\n\r\n    presetSel.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            input.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0;\r\n        }\r\n    });\r\n\r\n    loadBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += INCREMENT;\r\n        render();\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.dataset.mode;\r\n            limit = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.deco-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.deco-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentDeco = btn.dataset.deco;\r\n            limit = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Rainbow Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n<section class=\"pg-rbtg-section pg-rbtg-sec1\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n\r\n\t<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec1\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading\">What Makes This <span class=\"pg-rbtg-kw\">Rainbow Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-rbtg-sub\">Bring your words to life with vibrant colors! Our rainbow text generator instantly converts your boring grey text into beautiful, multi-colored HTML, BBCode, or Discord ANSI ready to paste anywhere.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,59,59,0.12);color:#ff3b3b;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Multiple Color Formats<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Generate rainbow text in HTML, BBCode for forums, or ANSI color codes for Discord, ensuring your text looks vibrant and renders correctly wherever you paste it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-rainbow\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Smooth Color Gradients<\/div>\r\n                    <p class=\"pg-rbtg-desc\">We don't just alternate basic colors. Our generator calculates smooth, mathematical color transitions so your text looks like a perfect, seamless rainbow gradient.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Instant Live Preview<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Type your phrase and watch the colors shift instantly. Adjust the color frequency and preview exactly how your vibrant text will look before you even copy it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-clipboard-list\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">One-Click Copying<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Grabbing your colorful code is effortless. One click copies the exact syntax needed for your specific platform without breaking the color tags or spacing.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-regular fa-face-smile-beam\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Emoji Rainbow Support<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Need color on platforms that don't support code? We also generate text using vibrant regional indicator emojis and colorful square blocks for Instagram and Twitter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,0,127,0.12);color:#ff007f;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">100% Free & Unlimited<\/div>\r\n                    <p class=\"pg-rbtg-desc\">No premium color palettes or paywalls. Generate as many beautiful, customized rainbow messages as you want for all your creative projects, completely free forever.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec2\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading pg-rbtg-sec2-heading\">How to Use Our <span class=\"pg-rbtg-kw pg-rbtg-sec2-kw\">Rainbow Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-rbtg-sub pg-rbtg-sec2-sub\">Adding a splash of color to your text takes only seconds. Follow these steps to generate perfect, multi-colored gradients for any online platform.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 1: Type Your Message<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Enter the text you want to colorize into the input box. Longer sentences and paragraphs create beautiful, sweeping color transitions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udee0\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 2: Choose Your Format<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Select the output format you need\u2014HTML for websites and emails, BBCode for forums, or ANSI blocks for Discord chat formatting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83c\udf08<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 3: Pick a Gradient<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Choose a classic ROYGBIV rainbow, pastel pride colors, or a customized two-color gradient to perfectly match your specific aesthetic.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 4: Preview the Colors<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Check the live preview box. It instantly renders your selected color codes so you know exactly what the final text will look like before posting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 5: Copy the Code<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Click the copy button to safely save the raw formatted text or code to your clipboard, perfectly preserving every color tag and symbol.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\u2728<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 6: Paste & Dazzle<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Paste the code into your forum post, Discord server, or website and watch your boring grey text transform into a vibrant masterpiece.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec3\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading\">Best Places to Use <span class=\"pg-rbtg-kw\">Rainbow Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-rbtg-sub\">Color grabs attention instantly. Here are the absolute best places to use your newly generated rainbow text to make a lasting, vibrant impression.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Discord Server Roles & Chat<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Use ANSI color formatting to drop vibrant, multi-colored messages in your Discord servers, or use rainbow emojis for your server channel names.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-comments\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Gaming & Community Forums<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Stand out in thread replies and signatures. Our BBCode output works perfectly on modern community boards, XenForo, and vBulletin forums.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-code\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Personal Websites & Blogs<\/div>\r\n                    <p class=\"pg-rbtg-desc\">The HTML output gives you instant inline CSS. Drop it straight into your website's code to add a colorful header without writing manual span tags.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-server\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">MOTD & Server Messages<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Running a Minecraft, Rust, or Garry's Mod server? Generate colorful \"Message of the Day\" banners to welcome your players in style as they log in.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,0,127,0.12);color:#ff007f;\"><i class=\"fa-solid fa-flag\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Pride Month & Events<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Show your support during Pride Month or special events! Generate text using specific flag color palettes to celebrate diversity, inclusion, and love.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-envelope-open-text\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Email Signatures<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Make your personal or creative email signature unforgettable by adding a subtle, colorful HTML gradient to your name, title, or sign-off quote.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --rbtg-primary: #ff007f;\r\n            --rbtg-grad: linear-gradient(135deg, #ff3b3b, #ff9800, #4caf50, #00bcd4, #9c27b0);\r\n            --rbtg-shadow: 0 12px 30px rgba(255, 0, 127, 0.18);\r\n            --rbtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --rbtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --rbtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-rbtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--rbtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-rbtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-rbtg-heading {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-rbtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-rbtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--rbtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--rbtg-ease);\r\n        }\r\n\r\n        .pg-rbtg-section:hover .pg-rbtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-sub {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-rbtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-rbtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--rbtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-rbtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--rbtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--rbtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(255,0,127,0.10) 0%, rgba(0,188,212,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-rbtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-rbtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--rbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-rbtg-card:hover .pg-rbtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down .pg-rbtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-rbtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--rbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-rbtg-card:hover .pg-rbtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down .pg-rbtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-rbtg-title {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-rbtg-desc {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec1 .pg-rbtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-rbtg-sec1 .pg-rbtg-card:hover {\r\n            border-color: var(--rbtg-primary);\r\n            box-shadow: var(--rbtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-heading.pg-rbtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-kw.pg-rbtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-kw.pg-rbtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffcc00, #00ddff, #ff007f);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-sub.pg-rbtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card::before {\r\n            background: var(--rbtg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card::before {\r\n            background: var(--rbtg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card:hover {\r\n            border-color: var(--rbtg-primary);\r\n            box-shadow: var(--rbtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-rbtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-rbtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-rbtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-rbtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-rbtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-rbtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-rbtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-rbtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-rbtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-rbtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-rbtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-rbtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-rbtg-down', 'pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-rbtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-rbtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-rbtg-down', 'pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE Rainbow Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-rainbow-wrapper {\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        \r\n        --theme-panel: rgba(20, 10, 40, 0.96);\r\n        --theme-panel-hover: rgba(30, 15, 55, 0.98);\r\n        --theme-bg-alt: rgba(15, 8, 30, 0.92);\r\n        --theme-border: rgba(120, 60, 180, 0.35);\r\n        \r\n        --rain-red: #ff4d4d;\r\n        --rain-orange: #ff9f43;\r\n        --rain-yellow: #feca57;\r\n        --rain-green: #1dd1a1;\r\n        --rain-blue: #54a0ff;\r\n        --rain-purple: #5f27cd;\r\n        --rain-pink: #ff6b81;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c8b6e6;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-rainbow: linear-gradient(90deg, #ff4d4d, #ff9f43, #feca57, #1dd1a1, #54a0ff, #5f27cd, #ff6b81, #ff4d4d);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);\r\n        \r\n        --glow-rainbow: 0 0 25px rgba(85, 160, 255, 0.5);\r\n        --shadow-ui: 0 15px 40px rgba(0, 0, 0, 0.7);\r\n        --shadow-card: 0 6px 20px rgba(95, 39, 205, 0.4);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-rainbow-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* INCREASED CONTAINER WIDTH *\/\r\n    .pg-rainbow-container {\r\n        max-width: 1250px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-rainbow-hero {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-rainbow-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3rem;\r\n        font-weight: 900;\r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        letter-spacing: -1px;\r\n        color: #ffffff;\r\n        text-shadow: 0 4px 15px rgba(0,0,0,0.5);\r\n        max-width: 1100px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: all 0.35s ease;\r\n    }\r\n    \r\n    .pg-rainbow-title i {\r\n        color: #ffffff;\r\n        border-radius: 16px;\r\n        padding: 14px;\r\n        font-size: 2.2rem;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));\r\n        transition: transform 0.3s ease;\r\n        animation: rainbow-shift 4s linear infinite;\r\n    }\r\n    \r\n    .pg-rainbow-title:hover i {\r\n        transform: rotate(20deg) scale(1.15);\r\n    }\r\n\r\n    .pg-rainbow-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 80px;\r\n        height: 4px;\r\n        background: #ffffff;\r\n        border-radius: 4px;\r\n        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\r\n        transition: all 0.35s ease;\r\n    }\r\n    \r\n    .pg-rainbow-title:hover::after {\r\n        width: 180px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n    }\r\n\r\n    @keyframes rainbow-shift {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 200% 50%; }\r\n    }\r\n    \r\n    .pg-rainbow-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.2rem;\r\n        color: rgba(255, 255, 255, 0.88);\r\n        max-width: 950px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        text-shadow: 0 2px 8px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    .pg-rainbow-main-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        border: 1px solid var(--theme-border);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 18px;\r\n        position: relative;\r\n        overflow: visible;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .pg-rainbow-main-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 4px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        border-radius: 4px 4px 0 0;\r\n    }\r\n\r\n    .pg-rainbow-header {\r\n        padding: 22px 28px;\r\n        border-bottom: 1px solid var(--theme-border);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 18px;\r\n        background: rgba(95, 39, 205, 0.1);\r\n        border-radius: 18px 18px 0 0;\r\n    }\r\n\r\n    .pg-rainbow-avatar {\r\n        width: 54px;\r\n        height: 54px;\r\n        border-radius: 50%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.5rem;\r\n        color: #000;\r\n        box-shadow: 0 0 15px rgba(255, 100, 200, 0.5);\r\n        transition: transform 0.3s ease;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .pg-rainbow-header:hover .pg-rainbow-avatar { transform: rotate(360deg) scale(1.1); }\r\n\r\n    .pg-rainbow-header-text {\r\n        font-weight: 700;\r\n        font-size: 1.3rem;\r\n        color: #ffffff;\r\n        letter-spacing: 0.3px;\r\n    }\r\n\r\n    .pg-rainbow-input-area {\r\n        padding: 28px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 18px;\r\n        background: var(--theme-bg-alt);\r\n    }\r\n\r\n    .pg-rainbow-textarea {\r\n        width: 100% !important;\r\n        min-height: 150px !important;\r\n        padding: 24px 26px !important;\r\n        background: rgba(0, 0, 0, 0.4) !important;\r\n        border: 1px solid var(--theme-border) !important;\r\n        border-left: 4px solid var(--rain-blue) !important;\r\n        color: #ffffff !important;\r\n        font-family: var(--primary-font) !important;\r\n        font-weight: 500 !important;\r\n        font-size: 1.65rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: vertical;\r\n        border-radius: 12px;\r\n        transition: all 0.3s ease;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .pg-rainbow-textarea:focus {\r\n        border-color: var(--rain-pink) !important;\r\n        box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.25) !important;\r\n        background: rgba(0, 0, 0, 0.5) !important;\r\n    }\r\n    \r\n    .pg-rainbow-textarea::placeholder { color: var(--text-muted); opacity: 0.6; }\r\n\r\n    .pg-rainbow-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        padding: 16px 20px;\r\n        border: 1px solid var(--theme-border);\r\n        border-radius: 10px;\r\n        background: rgba(95, 39, 205, 0.1);\r\n    }\r\n\r\n    .pg-rainbow-tool-group {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-rainbow-btn {\r\n        background: transparent;\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 10px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .pg-rainbow-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%;\r\n        width: 100%; height: 100%;\r\n        background: var(--grad-shimmer);\r\n        transition: left 0.4s ease;\r\n    }\r\n    \r\n    .pg-rainbow-btn:hover {\r\n        background: rgba(95, 39, 205, 0.25);\r\n        color: #ffffff;\r\n        border-color: var(--rain-blue);\r\n        box-shadow: 0 0 15px rgba(84, 160, 255, 0.4);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-rainbow-btn:hover::before { left: 100%; }\r\n\r\n    .pg-rainbow-btn.primary-btn {\r\n        color: var(--rain-yellow);\r\n        background: rgba(254, 202, 87, 0.15);\r\n        border-color: var(--rain-yellow);\r\n    }\r\n    \r\n    .pg-rainbow-btn.primary-btn:hover {\r\n        background: rgba(254, 202, 87, 0.3);\r\n        box-shadow: 0 0 15px rgba(254, 202, 87, 0.4);\r\n    }\r\n\r\n    .pg-rainbow-btn:active { transform: scale(0.96); }\r\n\r\n    .pg-rainbow-preset {\r\n        background: rgba(0,0,0,0.35);\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 10px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: all 0.25s ease;\r\n        min-width: 180px;\r\n    }\r\n    \r\n    .pg-rainbow-preset:hover, .pg-rainbow-preset:focus {\r\n        background: rgba(95, 39, 205, 0.3);\r\n        color: var(--rain-yellow);\r\n        border-color: var(--rain-green);\r\n    }\r\n    \r\n    .pg-rainbow-preset option {\r\n        background: var(--theme-panel);\r\n        color: #ffffff;\r\n    }\r\n\r\n    .pg-rainbow-settings {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 24px;\r\n        padding: 26px 24px;\r\n        background: var(--theme-panel);\r\n        border-top: 1px solid var(--theme-border);\r\n    }\r\n\r\n    .pg-rainbow-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.92rem;\r\n        font-weight: 700;\r\n        color: #ffffff;\r\n        margin-bottom: 12px;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .pg-rainbow-label i {\r\n        color: var(--rain-blue);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-rainbow-options {\r\n        display: grid;\r\n        gap: 10px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid transparent;\r\n        padding: 14px 10px;\r\n        color: #ffffff;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.82rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: all 0.25s ease;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn i {\r\n        font-size: 1.2rem;\r\n        color: var(--text-muted);\r\n        transition: all 0.25s ease;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0; left: 0; width: 0%; height: 3px;\r\n        background: var(--grad-rainbow);\r\n        transition: width 0.3s ease;\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn:hover::after { width: 100%; }\r\n    \r\n    .pg-rainbow-opt-btn:hover {\r\n        background: rgba(95, 39, 205, 0.25);\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn:hover i {\r\n        color: var(--rain-yellow);\r\n        transform: scale(1.15);\r\n    }\r\n\r\n    .pg-rainbow-opt-btn.active {\r\n        background: rgba(95, 39, 205, 0.45);\r\n        color: #ffffff;\r\n        border-color: var(--rain-purple);\r\n        box-shadow: 0 0 15px rgba(95, 39, 205, 0.5);\r\n    }\r\n    \r\n    .pg-rainbow-opt-btn.active::after { width: 100%; }\r\n    \r\n    .pg-rainbow-opt-btn.active i { color: var(--rain-green); }\r\n\r\n    .pg-rainbow-results {\r\n        padding: 40px 0;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    \r\n    .pg-rainbow-grid {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-rainbow-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border);\r\n        border-left: 4px solid transparent;\r\n        padding: 0;\r\n        transition: all 0.35s ease;\r\n        position: relative;\r\n        overflow: visible;\r\n        border-radius: 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        box-shadow: var(--shadow-card);\r\n        min-height: auto;\r\n    }\r\n    \r\n    .pg-rainbow-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 3px;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        border-radius: 4px 4px 0 0;\r\n    }\r\n    \r\n    .pg-rainbow-card:hover {\r\n        transform: translateX(4px);\r\n        border-color: rgba(95, 39, 205, 0.6);\r\n        border-left-color: var(--rain-purple);\r\n        box-shadow: 0 8px 25px rgba(95, 39, 205, 0.5), 0 4px 12px rgba(0, 0, 0, 0.6);\r\n    }\r\n    \r\n    .pg-rainbow-card:hover::before { opacity: 1; }\r\n\r\n    .pg-rainbow-card-inner {\r\n        display: flex;\r\n        align-items: center;\r\n        width: 100%;\r\n        padding: 20px 24px;\r\n        gap: 18px;\r\n    }\r\n\r\n    .pg-rainbow-card-avatar {\r\n        width: 46px;\r\n        height: 46px;\r\n        border-radius: 50%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 3s linear infinite;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #000;\r\n        font-size: 1.15rem;\r\n        flex-shrink: 0;\r\n        box-shadow: 0 0 12px rgba(255, 100, 200, 0.4);\r\n    }\r\n\r\n    .pg-rainbow-card-content {\r\n        flex: 1;\r\n        min-width: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-rainbow-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.92rem;\r\n        font-weight: 700;\r\n        color: #ffffff;\r\n        text-align: left;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n    }\r\n\r\n    .pg-rainbow-card-preview {\r\n        font-size: 1.3rem;\r\n        color: var(--rain-yellow);\r\n        text-align: left;\r\n        font-family: var(--primary-font);\r\n        font-weight: 600;\r\n        position: relative;\r\n        z-index: 1;\r\n        transition: all 0.3s ease;\r\n        white-space: normal !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.5 !important;\r\n        max-height: 85px;\r\n        overflow-y: auto;\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--rain-purple) transparent;\r\n    }\r\n    \r\n    .pg-rainbow-card-preview::-webkit-scrollbar { width: 5px; }\r\n    .pg-rainbow-card-preview::-webkit-scrollbar-track { background: transparent; }\r\n    .pg-rainbow-card-preview::-webkit-scrollbar-thumb { background: var(--rain-purple); border-radius: 3px; }\r\n    \r\n    .pg-rainbow-card:hover .pg-rainbow-card-preview { color: #ffffff; }\r\n\r\n    .pg-rainbow-card-copy-btn {\r\n        background: transparent;\r\n        border: 1px solid var(--theme-border);\r\n        color: var(--text-muted);\r\n        width: 42px;\r\n        height: 42px;\r\n        min-width: 42px;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: all 0.25s ease;\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        margin-left: auto;\r\n    }\r\n    \r\n    .pg-rainbow-card-copy-btn i { font-size: 1.1rem; transition: all 0.25s ease; }\r\n    \r\n    .pg-rainbow-card-copy-btn:hover {\r\n        background: var(--rain-purple);\r\n        color: #ffffff;\r\n        border-color: var(--rain-purple);\r\n        box-shadow: var(--glow-rainbow);\r\n        transform: scale(1.1) rotate(10deg);\r\n    }\r\n    \r\n    .pg-rainbow-card-copy-btn:hover i { transform: scale(1.2); }\r\n    \r\n    .pg-rainbow-card-copy-btn:active { transform: scale(0.9); }\r\n    \r\n    .pg-rainbow-card-copy-btn.copied {\r\n        background: var(--rain-green) !important;\r\n        color: #000 !important;\r\n        border-color: var(--rain-green) !important;\r\n        box-shadow: 0 0 15px rgba(29, 209, 161, 0.6) !important;\r\n    }\r\n\r\n    .pg-rainbow-card-footer {\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        gap: 12px;\r\n        padding: 12px 24px;\r\n        border-top: 1px solid rgba(95, 39, 205, 0.2);\r\n        color: var(--text-muted);\r\n        font-size: 0.78rem;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .pg-rainbow-card-action {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        cursor: pointer;\r\n        transition: color 0.2s ease;\r\n    }\r\n    .pg-rainbow-card-action:hover { color: var(--rain-blue); }\r\n    .pg-rainbow-card-action:hover i { transform: scale(1.2); }\r\n    .pg-rainbow-card-action i { transition: transform 0.2s ease; }\r\n\r\n    \/* LOAD MORE BUTTON - WHITE TEXT *\/\r\n    .pg-rainbow-load-btn {\r\n        background: var(--theme-panel);\r\n        color: #ffffff;\r\n        border: 2px solid #ffffff;\r\n        padding: 15px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        font-size: 1.05rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        border-radius: 12px;\r\n        transition: all 0.3s ease;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-rainbow-load-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: var(--grad-rainbow);\r\n        background-size: 200% 100%;\r\n        animation: rainbow-shift 2s linear infinite;\r\n        transition: left 0.5s ease;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-rainbow-load-btn span, .pg-rainbow-load-btn i { position: relative; z-index: 1; }\r\n    \r\n    .pg-rainbow-load-btn:hover {\r\n        color: #000;\r\n        border-color: transparent;\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 0 35px rgba(255, 255, 255, 0.5);\r\n    }\r\n    \r\n    .pg-rainbow-load-btn:hover::before { left: 0; }\r\n    .pg-rainbow-load-btn:hover i { transform: translateY(5px) rotate(180deg); }\r\n    .pg-rainbow-load-btn:active { transform: translateY(0); }\r\n\r\n    .pg-rainbow-toast {\r\n        visibility: hidden;\r\n        background: rgba(15, 8, 30, 0.98);\r\n        color: var(--rain-green);\r\n        padding: 16px 26px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(25px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        box-shadow: 0 12px 35px rgba(0,0,0,0.8);\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        border: 1px solid var(--rain-green);\r\n    }\r\n    \r\n    .pg-rainbow-toast i {\r\n        color: #000;\r\n        background: var(--rain-green);\r\n        border-radius: 50%;\r\n        padding: 5px;\r\n        font-size: 1rem;\r\n    }\r\n    \r\n    .pg-rainbow-toast.show {\r\n        visibility: visible;\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-rainbow-container { max-width: 900px !important; }\r\n        .pg-rainbow-title { font-size: 2.4rem; }\r\n        .pg-rainbow-settings { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-rainbow-container { padding: 30px 15px !important; max-width: 100% !important; }\r\n        .pg-rainbow-results { padding: 25px 0; }\r\n        .pg-rainbow-settings { padding: 18px; gap: 18px; }\r\n        .pg-rainbow-input-area { padding: 18px; }\r\n        .pg-rainbow-textarea { min-height: 130px !important; font-size: 1.35rem !important; padding: 16px 18px !important; }\r\n        \r\n        .pg-rainbow-toolbar { flex-direction: column; align-items: stretch; }\r\n        .pg-rainbow-tool-group { justify-content: center; }\r\n        .pg-rainbow-preset { width: 100%; text-align: center; min-width: auto; }\r\n        \r\n        .pg-rainbow-card-inner { padding: 16px 18px; gap: 14px; }\r\n        .pg-rainbow-card-avatar { width: 38px; height: 38px; font-size: 0.95rem; }\r\n        .pg-rainbow-card-preview { font-size: 1.15rem; max-height: 75px; }\r\n        .pg-rainbow-card-footer { padding: 10px 18px; justify-content: center; flex-wrap: wrap; }\r\n        \r\n        .pg-rainbow-opt-btn { padding: 12px 8px; font-size: 0.78rem; }\r\n        .pg-rainbow-load-btn { padding: 13px 28px; font-size: 0.95rem; width: 100%; justify-content: center; }\r\n        .pg-rainbow-title { font-size: 1.9rem; }\r\n        .pg-rainbow-subtitle { font-size: 0.95rem; }\r\n        .pg-rainbow-header { padding: 18px; }\r\n        .pg-rainbow-avatar { width: 46px; height: 46px; font-size: 1.2rem; }\r\n        .pg-rainbow-card-copy-btn { width: 36px; height: 36px; min-width: 36px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-rainbow-wrapper\" id=\"pg-rainbow-tool\">\r\n    <div class=\"pg-rainbow-container pg-rainbow-hero\">\r\n        <h1 class=\"pg-rainbow-title\"><i class=\"fa-solid fa-rainbow\"><\/i> Rainbow Text Generator \u2013 Colorize Instantly<\/h1>\r\n        <p class=\"pg-rainbow-subtitle\">Transform text into vibrant rainbow patterns using Unicode symbols, segmented cycles, and gothic displays. Perfect for eye-catching social media, bios, and creative messaging.<\/p>\r\n        \r\n        <div class=\"pg-rainbow-main-card\">\r\n            <div class=\"pg-rainbow-header\">\r\n                <div class=\"pg-rainbow-avatar\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                <div class=\"pg-rainbow-header-text\">Create Colorful Text<\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-rainbow-input-area\">\r\n                <textarea class=\"pg-rainbow-textarea\" id=\"pgRainbowInput\" placeholder=\"Enter text to paint with colors...\"><\/textarea>\r\n                \r\n                <div class=\"pg-rainbow-toolbar\">\r\n                    <div class=\"pg-rainbow-tool-group\">\r\n                        <button class=\"pg-rainbow-btn\" id=\"pgRainbowPaste\" title=\"Paste\"><i class=\"fa-solid fa-clipboard\"><\/i> Paste<\/button>\r\n                        <button class=\"pg-rainbow-btn\" id=\"pgRainbowSelect\" title=\"Select\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                        <button class=\"pg-rainbow-btn primary-btn\" id=\"pgRainbowCopyBase\" title=\"Copy Base\"><i class=\"fa-regular fa-copy\"><\/i> Copy<\/button>\r\n                    <\/div>\r\n                    \r\n                    <select class=\"pg-rainbow-preset\" id=\"pgRainbowPreset\">\r\n                        <option value=\"\" disabled selected>\ud83c\udf08 Rainbow Presets<\/option>\r\n                        <option value=\"Living in full color \u2728\">\u2728 Vibrant Vibes<\/option>\r\n                        <option value=\"Rainbow Magic\">\ud83e\udd84 Magic Mode<\/option>\r\n                        <option value=\"Color Me Happy\">\ud83c\udfa8 Happy Colors<\/option>\r\n                        <option value=\"Spectrum Text Art\">\ud83c\udf0a Spectrum Art<\/option>\r\n                        <option value=\"Prism Effect\">\ud83d\udd2e Prism Glow<\/option>\r\n                        <option value=\"Chromatic Text\">\ud83d\udc8e Chromatic<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-rainbow-settings\">\r\n                <div>\r\n                    <div class=\"pg-rainbow-label\"><i class=\"fa-solid fa-text-height\"><\/i> Rainbow Style<\/div>\r\n                    <div class=\"pg-rainbow-options\">\r\n                        <button class=\"pg-rainbow-opt-btn style-btn active\" data-mode=\"Symbols\">\r\n                            <i class=\"fa-solid fa-icons\"><\/i> Symbol Rainbow\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Segmented\">\r\n                            <i class=\"fa-solid fa-layer-group\"><\/i> Segmented\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Gothic\">\r\n                            <i class=\"fa-solid fa-chess-rook\"><\/i> Gothic\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn style-btn\" data-mode=\"Cycled\">\r\n                            <i class=\"fa-solid fa-repeat\"><\/i> Cycled\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-rainbow-label\"><i class=\"fa-solid fa-sliders\"><\/i> Pattern Density<\/div>\r\n                    <div class=\"pg-rainbow-options\">\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn active\" data-deco=\"Light\">\r\n                            <i class=\"fa-solid fa-sun\"><\/i> Light\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Medium\">\r\n                            <i class=\"fa-solid fa-cloud-sun\"><\/i> Medium\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Heavy\">\r\n                            <i class=\"fa-solid fa-cloud-showers-heavy\"><\/i> Heavy\r\n                        <\/button>\r\n                        <button class=\"pg-rainbow-opt-btn deco-btn\" data-deco=\"Max\">\r\n                            <i class=\"fa-solid fa-star\"><\/i> Maximum\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pg-rainbow-results\">\r\n            <div class=\"pg-rainbow-grid\" id=\"pgRainbowGrid\"><\/div>\r\n            <button class=\"pg-rainbow-load-btn\" id=\"pgRainbowLoadBtn\"><span>Load More Styles<\/span> <i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgRainbowToast\" class=\"pg-rainbow-toast\"><i class=\"fa-solid fa-check\"><\/i> <span>Copied!<\/span><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-rainbow-tool');\r\n    const input = wrapper.querySelector('#pgRainbowInput');\r\n    const grid = wrapper.querySelector('#pgRainbowGrid');\r\n    const loadBtn = wrapper.querySelector('#pgRainbowLoadBtn');\r\n    const toast = wrapper.querySelector('#pgRainbowToast');\r\n    const pasteBtn = wrapper.querySelector('#pgRainbowPaste');\r\n    const selectBtn = wrapper.querySelector('#pgRainbowSelect');\r\n    const copyBase = wrapper.querySelector('#pgRainbowCopyBase');\r\n    const presetSel = wrapper.querySelector('#pgRainbowPreset');\r\n\r\n    let currentMode = 'Symbols';\r\n    let currentDeco = 'Light';\r\n    let limit = 8;\r\n    const INCREMENT = 8;\r\n    const TOTAL = 112;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const baseArr = Array.from(base);\r\n\r\n    const symbols = ['\u2728','\ud83c\udf1f','\ud83d\udcab','\u2b50','\ud83c\udf38','\ud83c\udf3a','\ud83c\udf3b','\ud83c\udf3c','\ud83e\udd8b','\ud83d\udd25','\ud83d\udc96','\ud83d\udc8e','\ud83c\udf08','\ud83c\udf88','\ud83c\udf40','\ud83c\udf0a','\ud83c\udfb5','\ud83c\udfb6','\ud83d\udc9c','\ud83d\udc99','\ud83d\udc9a','\ud83d\udc9b','\ud83e\udde1','\u2764\ufe0f'];\r\n    const accents = ['\u0302','\u0303','\u030c','\u0304','\u0306','\u0307','\u0308','\u030b','\u0304','\u0301','\u0300','\u0302','\u0303','\u030c'];\r\n    \r\n    const gothicMap = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const gothicArr = Array.from(gothicMap);\r\n\r\n    const scriptMap = \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\u212c\ud835\udc9e\ud835\udc9f\u2130\u2131\ud835\udca2\u210b\u2110\ud835\udca5\ud835\udca6\u2112\u2133\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\u211b\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb50123456789\";\r\n    const scriptArr = Array.from(scriptMap);\r\n\r\n    const transformText = (txt, mode, deco, idx) => {\r\n        if(!txt) return \"\";\r\n        const densityMap = { 'Light': 1, 'Medium': 2, 'Heavy': 3, 'Max': 5 };\r\n        const density = densityMap[deco] || 1;\r\n        \r\n        let out = '';\r\n        \r\n        if(mode === 'Symbols') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                const sym = symbols[(i + idx) % symbols.length];\r\n                return sym + c;\r\n            }).join('');\r\n        } else if(mode === 'Segmented') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                const acc = accents[(i + idx) % accents.length];\r\n                let result = c + acc;\r\n                for(let d=1; d<density; d++) result += accents[(i + d + idx) % accents.length];\r\n                return result;\r\n            }).join('');\r\n        } else if(mode === 'Gothic') {\r\n            out = Array.from(txt).map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? gothicArr[i] : c;\r\n            }).join('');\r\n            out = Array.from(out).map((c, i) => {\r\n                if(i % (4-density) === 0 && c !== ' ') return c + accents[(i+idx) % accents.length];\r\n                return c;\r\n            }).join('');\r\n        } else if(mode === 'Cycled') {\r\n            out = Array.from(txt).map((c, i) => {\r\n                if(c === ' ') return c;\r\n                let result = c;\r\n                for(let d=0; d<density; d++) {\r\n                    result += symbols[(i + d + idx) % symbols.length];\r\n                }\r\n                return result;\r\n            }).join('');\r\n        }\r\n        \r\n        return out;\r\n    };\r\n\r\n    const copyText = (txt, btn) => {\r\n        if (navigator.clipboard && navigator.clipboard.writeText) {\r\n            navigator.clipboard.writeText(txt).then(() => showToast(btn));\r\n        } else {\r\n            const ta = document.createElement(\"textarea\");\r\n            ta.value = txt;\r\n            ta.style.cssText = \"position:fixed;top:0;left:0;opacity:0;pointer-events:none;\";\r\n            document.body.appendChild(ta);\r\n            ta.select();\r\n            try { document.execCommand('copy'); showToast(btn); } catch(e) { console.error(e); }\r\n            document.body.removeChild(ta);\r\n        }\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.classList.add('copied');\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            setTimeout(() => {\r\n                btn.classList.remove('copied');\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n            }, 1400);\r\n        }\r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1400);\r\n    };\r\n\r\n    const genMeta = () => {\r\n        const names = [\r\n            'Vivid Rainbow', 'Symbol Spectrum', 'Gothic Glow', 'Prism Mix',\r\n            'Color Wave', 'Chromatic Cycle', 'Segmented Glow', 'Heavy Rain',\r\n            'Soft Pastel', 'Bright Burst', 'Neon Prism', 'Crystal Mix',\r\n            'Magic Spectrum', 'Vivid Cycle', 'Dark Gothic', 'Light Spark',\r\n            'Rainbow Wave', 'Color Burst', 'Gothic Prism', 'Symbol Glow',\r\n            'Vivid Mix', 'Chromatic Spark', 'Prism Wave', 'Segmented Mix'\r\n        ];\r\n        const icons = ['fa-rainbow', 'fa-icons', 'fa-chess-rook', 'fa-prism', 'fa-sun', 'fa-moon', 'fa-star', 'fa-heart', 'fa-gem', 'fa-leaf', 'fa-bolt', 'fa-droplet', 'fa-wand-sparkles', 'fa-palette', 'fa-umbrella', 'fa-cloud-sun'];\r\n        \r\n        const list = [];\r\n        for(let i=0; i<TOTAL; i++) {\r\n            const times = ['Just now', '1s ago', '5s ago', '10s ago', '20s ago', '30s ago', '1m ago', '3m ago', '5m ago', '10m ago'];\r\n            list.push({\r\n                id: `rainbow-${i}`,\r\n                name: `${names[i % names.length]} #${Math.floor(i\/names.length)+1}`,\r\n                time: times[i % times.length],\r\n                icon: icons[i % icons.length]\r\n            });\r\n        }\r\n        return list;\r\n    };\r\n\r\n    const allMeta = genMeta();\r\n\r\n    const render = () => {\r\n        grid.innerHTML = '';\r\n        const raw = input.value || \"Rainbow Magic! \ud83c\udf08\";\r\n        const show = allMeta.slice(0, limit);\r\n        \r\n        show.forEach((meta, idx) => {\r\n            const out = transformText(raw, currentMode, currentDeco, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-rainbow-card';\r\n            card.innerHTML = `\r\n                <div class=\"pg-rainbow-card-inner\">\r\n                    <div class=\"pg-rainbow-card-avatar\"><i class=\"fa-solid ${meta.icon}\"><\/i><\/div>\r\n                    <div class=\"pg-rainbow-card-content\">\r\n                        <div class=\"pg-rainbow-card-title\">${meta.name}<\/div>\r\n                        <div class=\"pg-rainbow-card-preview\">${out}<\/div>\r\n                    <\/div>\r\n                    <button class=\"pg-rainbow-card-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-rainbow-card-footer\">\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-regular fa-heart\"><\/i> Like<\/div>\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-regular fa-bookmark\"><\/i> Save<\/div>\r\n                    <div class=\"pg-rainbow-card-action\"><i class=\"fa-solid fa-share-nodes\"><\/i> Share<\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-rainbow-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n                copyText(out, copyBtn);\r\n            });\r\n            \r\n            grid.appendChild(card);\r\n        });\r\n        \r\n        const remaining = Math.max(0, TOTAL - limit);\r\n        if(remaining > 0) {\r\n            loadBtn.style.display = 'inline-flex';\r\n            loadBtn.querySelector('span').textContent = `Load More Styles (${remaining})`;\r\n        } else {\r\n            loadBtn.style.display = 'none';\r\n        }\r\n    };\r\n\r\n    input.addEventListener('input', render);\r\n    \r\n    pasteBtn.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const t = await navigator.clipboard.readText();\r\n            input.value = t;\r\n            render();\r\n        } catch {\r\n            input.focus();\r\n        }\r\n    });\r\n\r\n    selectBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        input.select();\r\n    });\r\n\r\n    copyBase.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(input.value) copyText(input.value, null);\r\n    });\r\n\r\n    presetSel.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            input.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0;\r\n        }\r\n    });\r\n\r\n    loadBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += INCREMENT;\r\n        render();\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.dataset.mode;\r\n            limit = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.deco-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.deco-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentDeco = btn.dataset.deco;\r\n            limit = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Rainbow Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n<section class=\"pg-rbtg-section pg-rbtg-sec1\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n\r\n\t<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec1\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading\">What Makes This <span class=\"pg-rbtg-kw\">Rainbow Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-rbtg-sub\">Bring your words to life with vibrant colors! Our rainbow text generator instantly converts your boring grey text into beautiful, multi-colored HTML, BBCode, or Discord ANSI ready to paste anywhere.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,59,59,0.12);color:#ff3b3b;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Multiple Color Formats<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Generate rainbow text in HTML, BBCode for forums, or ANSI color codes for Discord, ensuring your text looks vibrant and renders correctly wherever you paste it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-rainbow\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Smooth Color Gradients<\/div>\r\n                    <p class=\"pg-rbtg-desc\">We don't just alternate basic colors. Our generator calculates smooth, mathematical color transitions so your text looks like a perfect, seamless rainbow gradient.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Instant Live Preview<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Type your phrase and watch the colors shift instantly. Adjust the color frequency and preview exactly how your vibrant text will look before you even copy it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-clipboard-list\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">One-Click Copying<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Grabbing your colorful code is effortless. One click copies the exact syntax needed for your specific platform without breaking the color tags or spacing.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-regular fa-face-smile-beam\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Emoji Rainbow Support<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Need color on platforms that don't support code? We also generate text using vibrant regional indicator emojis and colorful square blocks for Instagram and Twitter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,0,127,0.12);color:#ff007f;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">100% Free & Unlimited<\/div>\r\n                    <p class=\"pg-rbtg-desc\">No premium color palettes or paywalls. Generate as many beautiful, customized rainbow messages as you want for all your creative projects, completely free forever.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec2\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading pg-rbtg-sec2-heading\">How to Use Our <span class=\"pg-rbtg-kw pg-rbtg-sec2-kw\">Rainbow Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-rbtg-sub pg-rbtg-sec2-sub\">Adding a splash of color to your text takes only seconds. Follow these steps to generate perfect, multi-colored gradients for any online platform.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 1: Type Your Message<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Enter the text you want to colorize into the input box. Longer sentences and paragraphs create beautiful, sweeping color transitions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udee0\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 2: Choose Your Format<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Select the output format you need\u2014HTML for websites and emails, BBCode for forums, or ANSI blocks for Discord chat formatting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83c\udf08<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 3: Pick a Gradient<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Choose a classic ROYGBIV rainbow, pastel pride colors, or a customized two-color gradient to perfectly match your specific aesthetic.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 4: Preview the Colors<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Check the live preview box. It instantly renders your selected color codes so you know exactly what the final text will look like before posting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 5: Copy the Code<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Click the copy button to safely save the raw formatted text or code to your clipboard, perfectly preserving every color tag and symbol.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec2-card\">\r\n                    <span class=\"pg-rbtg-emoji\">\u2728<\/span>\r\n                    <div class=\"pg-rbtg-title\">Step 6: Paste & Dazzle<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Paste the code into your forum post, Discord server, or website and watch your boring grey text transform into a vibrant masterpiece.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-rbtg-section pg-rbtg-sec3\">\r\n        <div class=\"pg-rbtg-wrap\">\r\n            <h2 class=\"pg-rbtg-heading\">Best Places to Use <span class=\"pg-rbtg-kw\">Rainbow Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-rbtg-sub\">Color grabs attention instantly. Here are the absolute best places to use your newly generated rainbow text to make a lasting, vibrant impression.<\/p>\r\n            <div class=\"pg-rbtg-grid\">\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Discord Server Roles & Chat<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Use ANSI color formatting to drop vibrant, multi-colored messages in your Discord servers, or use rainbow emojis for your server channel names.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-comments\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Gaming & Community Forums<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Stand out in thread replies and signatures. Our BBCode output works perfectly on modern community boards, XenForo, and vBulletin forums.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-code\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Personal Websites & Blogs<\/div>\r\n                    <p class=\"pg-rbtg-desc\">The HTML output gives you instant inline CSS. Drop it straight into your website's code to add a colorful header without writing manual span tags.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-server\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">MOTD & Server Messages<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Running a Minecraft, Rust, or Garry's Mod server? Generate colorful \"Message of the Day\" banners to welcome your players in style as they log in.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(255,0,127,0.12);color:#ff007f;\"><i class=\"fa-solid fa-flag\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Pride Month & Events<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Show your support during Pride Month or special events! Generate text using specific flag color palettes to celebrate diversity, inclusion, and love.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-rbtg-card pg-rbtg-sec3-card\">\r\n                    <div class=\"pg-rbtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-envelope-open-text\"><\/i><\/div>\r\n                    <div class=\"pg-rbtg-title\">Email Signatures<\/div>\r\n                    <p class=\"pg-rbtg-desc\">Make your personal or creative email signature unforgettable by adding a subtle, colorful HTML gradient to your name, title, or sign-off quote.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --rbtg-primary: #ff007f;\r\n            --rbtg-grad: linear-gradient(135deg, #ff3b3b, #ff9800, #4caf50, #00bcd4, #9c27b0);\r\n            --rbtg-shadow: 0 12px 30px rgba(255, 0, 127, 0.18);\r\n            --rbtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --rbtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --rbtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-rbtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--rbtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-rbtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-rbtg-heading {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-rbtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-rbtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--rbtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--rbtg-ease);\r\n        }\r\n\r\n        .pg-rbtg-section:hover .pg-rbtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-sub {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-rbtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-rbtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--rbtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-rbtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--rbtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--rbtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(255,0,127,0.10) 0%, rgba(0,188,212,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-rbtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-rbtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--rbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-rbtg-card:hover .pg-rbtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down .pg-rbtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-rbtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--rbtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-rbtg-card:hover .pg-rbtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-rbtg-card.pg-rbtg-down .pg-rbtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-rbtg-title {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-rbtg-desc {\r\n            font-family: var(--rbtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec1 .pg-rbtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-rbtg-sec1 .pg-rbtg-card:hover {\r\n            border-color: var(--rbtg-primary);\r\n            box-shadow: var(--rbtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-heading.pg-rbtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-kw.pg-rbtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-kw.pg-rbtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffcc00, #00ddff, #ff007f);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-sub.pg-rbtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card::before {\r\n            background: var(--rbtg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-card.pg-rbtg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-rbtg-sec2 .pg-rbtg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-rbtg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card::before {\r\n            background: var(--rbtg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-rbtg-sec3 .pg-rbtg-card.pg-rbtg-sec3-card:hover {\r\n            border-color: var(--rbtg-primary);\r\n            box-shadow: var(--rbtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-rbtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-rbtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-rbtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-rbtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-rbtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-rbtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-rbtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-rbtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-rbtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-rbtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-rbtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-rbtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-rbtg-down', 'pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-rbtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-rbtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-rbtg-down', 'pg-rbtg-glow', 'pg-rbtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-592","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Generatore di testo arcobaleno \u2013 Colora all&#039;istante<\/title>\n<meta name=\"description\" content=\"Crea testi dai colori vivaci e arcobaleno con il nostro generatore di testo arcobaleno gratuito. Aggiungi fantastici effetti multicolore a qualsiasi testo: copia e incolla in pochi secondi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/it\/rainbow-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rainbow Text Generator \u2013 Colorize Instantly\" \/>\n<meta property=\"og:description\" content=\"Create vibrant rainbow text with our free Rainbow Text Generator. Add stunning multicolor effects to any text \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T10:05:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/rainbow-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/rainbow-text-generator\\\/\",\"name\":\"Rainbow Text Generator \u2013 Colorize Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-20T00:00:20+00:00\",\"dateModified\":\"2026-04-06T10:05:26+00:00\",\"description\":\"Create vibrant rainbow text with our free Rainbow Text Generator. Add stunning multicolor effects to any text \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/rainbow-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/rainbow-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/rainbow-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rainbow Text Generator \u2013 Colorize Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generatore di testo arcobaleno \u2013 Colora all&#39;istante","description":"Crea testi dai colori vivaci e arcobaleno con il nostro generatore di testo arcobaleno gratuito. Aggiungi fantastici effetti multicolore a qualsiasi testo: copia e incolla in pochi secondi.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/it\/rainbow-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Rainbow Text Generator \u2013 Colorize Instantly","og_description":"Create vibrant rainbow text with our free Rainbow Text Generator. Add stunning multicolor effects to any text \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T10:05:26+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/","url":"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/","name":"Rainbow Text Generator \u2013 Colorize Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-20T00:00:20+00:00","dateModified":"2026-04-06T10:05:26+00:00","description":"Create vibrant rainbow text with our free Rainbow Text Generator. Add stunning multicolor effects to any text \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/rainbow-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/rainbow-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Rainbow Text Generator \u2013 Colorize Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/592\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/592\/revisions\/595"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/media?parent=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}