{"id":542,"date":"2026-03-28T00:00:34","date_gmt":"2026-03-28T00:00:34","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=542"},"modified":"2026-04-06T08:55:33","modified_gmt":"2026-04-06T08:55:33","slug":"bubble-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/it\/bubble-text-generator\/","title":{"rendered":"Bubble Text Generator \u2013 Style 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 Bubble 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    .bt-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* BUBBLE THEME PALETTE - Iridescent & Glassy *\/\r\n        --theme-panel: rgba(20, 12, 35, 0.85); \r\n        --theme-border: rgba(255, 255, 255, 0.25);\r\n        \r\n        \/* BUBBLE ACCENTS *\/\r\n        --bt-pink: #ffb6c1;\r\n        --bt-lavender: #e6e6fa;\r\n        --bt-mint: #b5f5ec;\r\n        --bt-cyan: #87ceeb;\r\n        --bt-pearl: #f0f8ff;\r\n        --void-dark: #0a0512;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c0b0e0;\r\n        \r\n        \/* GRADIENTS *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-iridescent: linear-gradient(135deg, #ffb6c1 0%, #e6e6fa 50%, #b5f5ec 100%);\r\n        --grad-bubble-surface: linear-gradient(180deg, rgba(60, 40, 80, 0.6) 0%, rgba(20, 10, 30, 0.8) 100%);\r\n        --grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(15, 8, 25, 0.9) 0%, rgba(8, 4, 15, 0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-pearl: 0 0 25px rgba(255, 255, 255, 0.2);\r\n        --glow-cyan: 0 0 20px rgba(135, 206, 235, 0.5);\r\n        --shadow-ui: 0 25px 60px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(20px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\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% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .bt-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .bt-container {\r\n        max-width: 1100px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .bt-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 15px;\r\n        width: 100%;\r\n    }\r\n\r\n    .bt-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);\r\n        max-width: 900px;\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: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .bt-main-title i {\r\n        background: var(--grad-iridescent);\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        color: transparent;\r\n        filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.6));\r\n        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;\r\n        animation: bt-bubble-pop 4s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes bt-bubble-pop {\r\n        0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }\r\n        50% { transform: scale(1.1) translateY(-6px) rotate(5deg); }\r\n    }\r\n    \r\n    .bt-main-title:hover i {\r\n        transform: scale(1.3) rotate(15deg);\r\n        filter: drop-shadow(0 0 20px rgba(135, 206, 235, 0.8));\r\n    }\r\n\r\n    .bt-main-title:hover {\r\n        letter-spacing: 8px;\r\n        text-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(135, 206, 235, 0.4);\r\n    }\r\n    \r\n    .bt-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -14px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 3px;\r\n        background: var(--grad-iridescent);\r\n        box-shadow: var(--glow-pearl);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease;\r\n    }\r\n    \r\n    .bt-main-title:hover::after { width: 60%; }\r\n    \r\n    .bt-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(240, 248, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 400;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - Iridescent Glass Box *\/\r\n    .bt-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border);\r\n        border-top: 1px solid rgba(255, 255, 255, 0.4); \/* Light reflection on top *\/\r\n        box-shadow: \r\n            var(--shadow-ui), \r\n            inset 0 0 0 1px rgba(255, 255, 255, 0.05),\r\n            inset 0 20px 40px rgba(255, 255, 255, 0.05);\r\n        border-radius: 24px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    \/* Iridescent sheen effect on hover *\/\r\n    .bt-generator-card:hover {\r\n        box-shadow: \r\n            0 30px 70px rgba(0, 0, 0, 0.9), \r\n            0 0 30px rgba(135, 206, 235, 0.2),\r\n            inset 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .bt-controls-wrapper {\r\n        padding: 30px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n        border-radius: 24px 24px 0 0; \/* Inner rounding *\/\r\n    }\r\n\r\n    .bt-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* INPUT BOX - Clear Glass *\/\r\n    .bt-enhanced-input-wrapper {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);\r\n        position: relative;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .bt-enhanced-input-wrapper:focus-within {\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: \r\n            inset 0 0 20px rgba(0,0,0,0.5),\r\n            0 0 15px rgba(135, 206, 235, 0.3);\r\n    }\r\n    \r\n    .bt-text-input {\r\n        width: 100% !important;\r\n        min-height: 140px !important;\r\n        padding: 24px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.6rem !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: none;\r\n        line-height: 1.5;\r\n        position: relative;\r\n        z-index: 2;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-text-input::placeholder { \r\n        color: rgba(255, 255, 255, 0.3); \r\n        font-style: italic; \r\n    }\r\n\r\n    .bt-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(0, 0, 0, 0.3);\r\n        padding: 14px 18px;\r\n        border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .bt-toolbar-btn {\r\n        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));\r\n        color: var(--bt-lavender);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        border-radius: 12px; \/* Pill shape *\/\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .bt-toolbar-btn:hover {\r\n        background: rgba(135, 206, 235, 0.2);\r\n        color: #fff;\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .bt-preset-select {\r\n        background: rgba(135, 206, 235, 0.1);\r\n        color: var(--bt-cyan);\r\n        border: 1px solid rgba(135, 206, 235, 0.3);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        max-width: 220px;\r\n        width: 100%;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%2387ceeb' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 14px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-preset-select:hover, .bt-preset-select:focus {\r\n        background-color: rgba(135, 206, 235, 0.25);\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 0 12px rgba(135, 206, 235, 0.4);\r\n    }\r\n    \r\n    .bt-preset-select option { background: #1a1025; color: #fff; }\r\n\r\n    .bt-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 18px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* SETTINGS BOXES - Soft Tinted Glass Pods *\/\r\n    .bt-settings-section > div {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 18px;\r\n        padding: 18px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .bt-settings-section > div:hover { \r\n        border-color: rgba(255, 255, 255, 0.3); \r\n        background: rgba(255, 255, 255, 0.06);\r\n    }\r\n\r\n    .bt-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.9);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.2px;\r\n        margin-bottom: 12px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n    \r\n    .bt-panel-label i { color: var(--bt-pink); margin-right: 8px; text-shadow: 0 0 8px var(--bt-pink); }\r\n\r\n    .bt-grid-options {\r\n        display: grid;\r\n        gap: 8px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    \/* OPTION BUTTONS - Bubble Bubbles *\/\r\n    .bt-option-btn {\r\n        background: rgba(0, 0, 0, 0.2);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        padding: 12px 6px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.68rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 12px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.4px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .bt-option-btn i { font-size: 1.1rem; transition: var(--transition-ui); }\r\n\r\n    .bt-option-btn:hover {\r\n        background: rgba(135, 206, 235, 0.15);\r\n        border-color: var(--bt-cyan);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.4), 0 0 10px rgba(135, 206, 235, 0.2);\r\n    }\r\n    \r\n    .bt-option-btn:hover i { transform: scale(1.2) rotate(10deg); color: var(--bt-pink); }\r\n\r\n    .bt-option-btn.active { \r\n        background: linear-gradient(135deg, rgba(135, 206, 235, 0.3), rgba(255, 182, 193, 0.2));\r\n        color: #fff; \r\n        border-color: var(--bt-lavender);\r\n        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);\r\n    }\r\n    \r\n    .bt-option-btn.active i {\r\n        color: var(--bt-mint);\r\n        text-shadow: 0 0 10px var(--bt-mint);\r\n    }\r\n\r\n    .bt-results-area { \r\n        padding: 35px 25px; \r\n        position: relative; \r\n        background: transparent;\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr !important;\r\n        gap: 18px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* RESULT CARD - Glassy Bubble Box *\/\r\n    .bt-result-card {\r\n        background: linear-gradient(160deg, rgba(40, 25, 60, 0.8) 0%, rgba(20, 12, 30, 0.9) 100%);\r\n        border: 1px solid rgba(255, 255, 255, 0.12);\r\n        border-top: 1px solid rgba(255, 255, 255, 0.25); \/* Top light *\/\r\n        border-radius: 20px;\r\n        padding: 24px 28px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    \/* Iridescent strip on hover *\/\r\n    .bt-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-iridescent);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .bt-result-card:hover {\r\n        transform: translateY(-5px) scale(1.005);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(135, 206, 235, 0.15);\r\n        background: linear-gradient(160deg, rgba(60, 40, 80, 0.85) 0%, rgba(30, 18, 45, 0.95) 100%);\r\n        border-color: rgba(255, 182, 193, 0.4);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .bt-result-card:hover::after { opacity: 1; }\r\n\r\n    .bt-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 10px;\r\n        padding-bottom: 10px;\r\n    }\r\n    \r\n    .bt-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.78rem;\r\n        font-weight: 800;\r\n        color: var(--bt-lavender);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .bt-card-title i {\r\n        color: var(--bt-pink);\r\n        font-size: 1rem;\r\n        transition: transform 0.3s ease;\r\n        text-shadow: 0 0 5px rgba(255, 182, 193, 0.4);\r\n    }\r\n\r\n    .bt-result-card:hover .bt-card-title { color: #fff; }\r\n    .bt-result-card:hover .bt-card-title i { transform: rotate(15deg) scale(1.2); color: var(--bt-mint); }\r\n\r\n    .bt-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.08);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        color: var(--text-bright);\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .bt-card-copy-btn i { transition: transform 0.25s ease; }\r\n    \r\n    .bt-card-copy-btn:hover {\r\n        background: var(--bt-cyan);\r\n        border-color: var(--bt-cyan);\r\n        color: #0a0512;\r\n        box-shadow: 0 0 15px rgba(135, 206, 235, 0.6);\r\n        transform: rotate(-5deg) scale(1.1);\r\n    }\r\n    \r\n    .bt-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .bt-card-preview {\r\n        font-size: 1.5rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        padding: 5px 0; \r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        \r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 0 1px 2px rgba(0,0,0,0.5);\r\n        line-height: 1.6;\r\n        max-height: 160px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .bt-result-card:hover .bt-card-preview { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }\r\n\r\n    .bt-btn-load {\r\n        background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        padding: 16px 40px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 0.95rem;\r\n        cursor: pointer;\r\n        margin-top: 35px;\r\n        text-transform: uppercase;\r\n        border-radius: 14px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 1.5px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        overflow: hidden;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.3);\r\n    }\r\n    \r\n    .bt-btn-load:hover { \r\n        background: linear-gradient(135deg, rgba(135, 206, 235, 0.2), rgba(255, 182, 193, 0.15)); \r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 8px 25px rgba(135, 206, 235, 0.3);\r\n        transform: translateY(-4px);\r\n    }\r\n    \r\n    .bt-btn-load:hover i { transform: translateY(5px); color: var(--bt-mint); }\r\n    \r\n    .bt-toast {\r\n        visibility: hidden;\r\n        background: linear-gradient(135deg, #201535, #0f0a1c);\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 14px 28px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 35px;\r\n        transform: translateX(-50%) translateY(15px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 14px;\r\n        border: 1px solid var(--bt-cyan);\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(135, 206, 235, 0.3);\r\n        letter-spacing: 0.8px;\r\n        opacity: 0;\r\n        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .bt-toast i { color: var(--bt-pink); text-shadow: 0 0 5px var(--bt-pink); }\r\n    .bt-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 900px) {\r\n        .bt-main-title { font-size: 2.6rem; }\r\n        .bt-settings-section { flex-direction: column; }\r\n        .bt-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .bt-container { padding: 25px 12px !important; }\r\n        .bt-results-area { padding: 25px 12px; }\r\n        .bt-controls-wrapper { padding: 18px; gap: 12px; }\r\n        .bt-text-input { min-height: 100px !important; font-size: 1.3rem !important; }\r\n        .bt-input-toolbar { flex-direction: column; align-items: stretch; }\r\n        .bt-preset-select { max-width: 100%; }\r\n        .bt-btn-load { padding: 14px 25px; font-size: 0.85rem; width: 100%; }\r\n        .bt-main-title { font-size: 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"bt-tool-wrapper\" id=\"bt-bubble-text-tool\">\r\n    <div class=\"bt-container bt-hero-content-wrapper\">\r\n        <h1 class=\"bt-main-title\"><i class=\"fa-solid fa-circle-dot\"><\/i> Bubble Text Generator \u2013 Style Instantly<\/h1>\r\n        <p class=\"bt-subtitle\">Pump up your words with circled bubbles, soft puffy styling, and dreamy accents. Create cute, readable Unicode text that stays perfectly copy-safe across all platforms.<\/p>\r\n        \r\n        <div class=\"bt-generator-card\">\r\n            <div class=\"bt-controls-wrapper\">\r\n                \r\n                <div class=\"bt-input-section\">\r\n                    <div class=\"bt-enhanced-input-wrapper\">\r\n                        <textarea class=\"bt-text-input\" id=\"btInputText\" placeholder=\"Blow some bubbles...\"><\/textarea>\r\n                        \r\n                        <div class=\"bt-input-toolbar\">\r\n                            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            \r\n                            <select class=\"bt-preset-select\" id=\"btPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83e\udee7 Bubble Presets<\/option>\r\n                                <option value=\"POP! Bubble Wrap Energy\">Pop Energy<\/option>\r\n                                <option value=\"Soft Clouds & Sweet Dreams\">Cloud Dreams<\/option>\r\n                                <option value=\"S P A C E   F L O A T\">Space Float<\/option>\r\n                                <option value=\"Cute & Comfy Vibes Only\">Cute Vibes<\/option>\r\n                                <option value=\"\u3010 P R O C E S S I N G \u3011\">Data Bubble<\/option>\r\n                                <option value=\"\u2605 S T A R D U S T \u2605\">Stardust<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"bt-settings-section\">\r\n                    <div>\r\n                        <div class=\"bt-panel-label\"><i class=\"fa-solid fa-shapes\"><\/i> Bubble Mode<\/div>\r\n                        <div class=\"bt-grid-options\">\r\n                            <button class=\"bt-option-btn mode-btn active\" data-val=\"Circled\">\r\n                                <i class=\"fa-regular fa-circle\"><\/i> Circled\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Puffy\">\r\n                                <i class=\"fa-solid fa-cloud\"><\/i> Soft Puffy\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Squared\">\r\n                                <i class=\"fa-regular fa-square\"><\/i> Squared\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"bt-panel-label\"><i class=\"fa-solid fa-wand-sparkles\"><\/i> Flow Style<\/div>\r\n                        <div class=\"bt-grid-options\">\r\n                            <button class=\"bt-option-btn style-btn active\" data-val=\"Spaced\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i> Spaced\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"Cluster\">\r\n                                <i class=\"fa-solid fa-circle-nodes\"><\/i> Cluster\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"SoftGlitch\">\r\n                                <i class=\"fa-solid fa-ghost\"><\/i> Soft Glitch\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"Framed\">\r\n                                <i class=\"fa-regular fa-square-full\"><\/i> Framed\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"bt-results-area\">\r\n                <div class=\"bt-result-list\" id=\"btResultList\"><\/div>\r\n                <button class=\"bt-btn-load\" id=\"btLoadMoreBtn\"><span>Pop More Bubbles<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"btToast\" class=\"bt-toast\"><i class=\"fa-solid fa-circle-check\"><\/i> Bubble Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('bt-bubble-text-tool');\r\n    const inputEl = wrapper.querySelector('#btInputText');\r\n    const resultList = wrapper.querySelector('#btResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#btLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#btToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#btBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#btBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#btBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#btPresetSelect');\r\n\r\n    let currentMode = 'Circled';\r\n    let currentStyle = 'Spaced';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const circledLower = \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\";\r\n    const circledUpper = \"\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\";\r\n    const circledNums = \"\u24ea\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\";\r\n    const circledMap = (circledLower + circledUpper + circledNums).split('');\r\n    \r\n    const squaredLower = \"\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd48\ud83c\udd49\";\r\n    const squaredUpper = \"\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd85\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\";\r\n    const squaredNums = \"0123456789\";\r\n    const squaredMap = (squaredLower + squaredUpper + squaredNums).split('');\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\u21280123456789\".split('');\r\n    const fullwidthMap = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19\".split('');\r\n\r\n    const puffySymbols = ['\uff61', '\uff65', '\uff9f', '\u2727', '\u2606', '\u00b0', '\u2601', '\u263e', '\u2740', '\u274b', '\ua565', '\u22b9', '\u2734', '\u22c6'];\r\n    const frameSymbols = ['\u3010', '\u3011', '\u300e', '\u300f', '\u3016', '\u3017', '\u300c', '\u300d', '\u230a', '\u230b'];\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const originalHTML = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--bt-pink)';\r\n            btn.style.borderColor = 'var(--bt-pink)';\r\n            btn.style.color = '#fff';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalHTML;\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 1500);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Soft Pop', 'Cloud Drift', 'Puffy Star', 'Bubble Gum', \r\n            'Dream Float', 'Cute Sphere', 'Pastel Cloud', 'Misty Orb',\r\n            'Gothic Bubble', 'Velvet Pop', 'Starry Cluster', 'Fuzzy Logic',\r\n            'Pillow Talk', 'Marshmallow', 'Cotton Candy', 'Silk Wave',\r\n            'Lullaby Pop', 'Moonlit Orb', 'Halo Effect', 'Aura Glow'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `bubble-${i}`,\r\n                name: names[i % names.length] + ` v${Math.floor(Math.random()*9)+1}.0`,\r\n                icon: ['cloud', 'star', 'droplet', 'sparkles', 'circle-nodes', 'heart', 'moon', 'gem'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let chars = Array.from(text);\r\n        let result = \"\";\r\n\r\n        \/\/ 1. Mode\r\n        if (mode === 'Circled') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? circledMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Puffy') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? fullwidthMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Gothic') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? gothicMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Squared') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? squaredMap[idx] : c;\r\n            }).join('');\r\n        }\r\n\r\n        \/\/ 2. Style\r\n        if (style === 'Spaced') {\r\n            result = Array.from(result).join(' ');\r\n        } else if (style === 'Cluster') {\r\n            result = chars.map((c, i) => {\r\n                let base = result[i] || c;\r\n                return (i % 2 === 0) ? puffySymbols[rand(puffySymbols.length)] + base : base + puffySymbols[rand(puffySymbols.length)];\r\n            }).join(' ');\r\n        } else if (style === 'SoftGlitch') {\r\n            result = Array.from(result).map((c, i) => {\r\n                if(i % 4 === 0 && rand(3) > 0) {\r\n                    return c + '\u0337' + '\u0334';\r\n                }\r\n                return c;\r\n            }).join('');\r\n        } else if (style === 'Framed') {\r\n            const f = (variationIndex % 5) * 2;\r\n            result = `${frameSymbols[f]} ${result} ${frameSymbols[f+1]}`;\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Blow some bubbles...\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'bt-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"bt-card-header\">\r\n                    <div class=\"bt-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"bt-card-copy-btn\" title=\"Copy Bubble Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"bt-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.bt-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Pop More Bubbles (${remaining})`;\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-check';\r\n            toast.querySelector('i').nextSibling.textContent = ' Base Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-circle-check';\r\n                toast.querySelector('i').nextSibling.textContent = ' Bubble Copied';\r\n            }, 1500);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6;\r\n            render(); \r\n        });\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            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Bubble Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n <section class=\"pg-btg-section pg-btg-sec1\">\r\n        <div class=\"pg-btg-wrap\">\r\n\r\n<\/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    <section class=\"pg-btg-section pg-btg-sec1\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading\">What Makes This <span class=\"pg-btg-kw\">Bubble Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-btg-sub\">Most text converters rely on fake bolding or messy letter-spacing to mimic bubble letters. Our bubble text generator uses precise Unicode circled and enclosed blocks to create perfectly round, authentic bubble characters that render beautifully everywhere.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(240,98,146,0.12);color:#f06292;\"><i class=\"fa-solid fa-soap\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Authentic Unicode Bubbles<\/div>\r\n                    <p class=\"pg-btg-desc\">Our bubble text generator maps every character to its precise Unicode circled equivalent \u2014 not fake CSS tricks \u2014 so your letters render as genuinely round, bouncy bubbles on any device or platform.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Multiple Bubble Styles<\/div>\r\n                    <p class=\"pg-btg-desc\">Choose from filled bubbles (\u24d1\u24e4\u24d1\u24d1\u24db\u24d4), outlined circles (\u24b7\u24e4\u24d1\u24d1\u24db\u24d4), and squared bubbles (\ud83c\udd51\ud83c\udd64\ud83c\udd51\ud83c\udd51\ud83c\udd5b\ud83c\udd54) \u2014 our bubble text generator gives you three distinct playful formats for any mood or design need.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(77,208,225,0.12);color:#4dd0e1;\"><i class=\"fa-solid fa-bezier-curve\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Flawless Curved Rendering<\/div>\r\n                    <p class=\"pg-btg-desc\">Bubble text often breaks into ugly squares on older devices \u2014 our bubble text generator exclusively uses widely-supported Unicode blocks so every curve renders perfectly on iOS, Android, and desktop.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-btg-desc\">Found the perfect bubble style? One click copies the formatted text to your clipboard \u2014 our bubble text generator preserves every single circle and enclosure symbol perfectly through the copy-paste process.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-share-from-square\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Social Media Optimized<\/div>\r\n                    <p class=\"pg-btg-desc\">Our bubble text generator is tested across Instagram, TikTok, Twitter, and Discord to ensure your bubbly usernames and captions display correctly without ugly missing-character rectangles.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">No Custom Fonts Required<\/div>\r\n                    <p class=\"pg-btg-desc\">Unlike font downloads that only work on your computer, our bubble text generator creates pure Unicode text \u2014 the receiver sees the exact same bubble letters without installing anything.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-btg-section pg-btg-sec2\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading pg-btg-sec2-heading\">How to Use Our <span class=\"pg-btg-kw pg-btg-sec2-kw\">Bubble Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-btg-sub pg-btg-sec2-sub\">Creating bouncy, rounded text takes exactly seconds. No design skills or special software needed \u2014 just follow these simple steps and get your perfect bubble text ready to paste anywhere.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 1: Type Your Regular Text<\/div>\r\n                    <p class=\"pg-btg-desc\">Enter any word, name, or phrase into the input box \u2014 our bubble text generator accepts standard English letters, numbers, and common punctuation as the base for your bubbly transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(240,98,146,0.12);color:#f06292;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 2: Choose a Bubble Style<\/div>\r\n                    <p class=\"pg-btg-desc\">Select from filled circles, outlined rings, or squared bubbles \u2014 our bubble text generator displays all variations instantly so you can pick the exact roundness and weight that fits your vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 3: Adjust Spacing and Case<\/div>\r\n                    <p class=\"pg-btg-desc\">Toggle letter spacing or switch between uppercase and lowercase bubbles \u2014 our bubble text generator gives you fine control over how dense or airy your bubbly text layout feels.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(77,208,225,0.12);color:#4dd0e1;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 4: Preview the Bubbles<\/div>\r\n                    <p class=\"pg-btg-desc\">See exactly how your bubble text looks before copying \u2014 our bubble text generator shows a live preview that mirrors precisely what the text will look like when pasted on your favorite social platform.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 5: Copy the Output<\/div>\r\n                    <p class=\"pg-btg-desc\">Hit the copy button next to your chosen style \u2014 our bubble text generator transfers the Unicode text to your clipboard with every single circular character preserved intact.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 6: Paste Anywhere<\/div>\r\n                    <p class=\"pg-btg-desc\">Drop your bubble text into usernames, bios, or messages \u2014 our bubble text generator output works natively on any app that supports standard Unicode text input.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-btg-section pg-btg-sec3\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading\">Best Places to Use <span class=\"pg-btg-kw\">Bubble Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-btg-sub\">Bubble text instantly softens your digital presence and makes it feel more playful and approachable. Here are the highest-impact places where our bubble text generator output transforms ordinary text into eye-catching content.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Instagram Bios and Display Names<\/div>\r\n                    <p class=\"pg-btg-desc\">A bubbly Instagram display name stands out instantly in search results and DMs \u2014 our bubble text generator creates the exact rounded aesthetic that signals a fun, curated, and approachable profile.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">TikTok Captions and Comments<\/div>\r\n                    <p class=\"pg-btg-desc\">Bubble text in TikTok comments grabs attention in a sea of plain text \u2014 our bubble text generator gives your replies and captions that bouncy, playful edge that drives likes and replies.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(0,0,0,0.08);color:#000000;\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Twitter\/X Display Names<\/div>\r\n                    <p class=\"pg-btg-desc\">Stand out in Twitter mentions and followers lists with a bubble text display name \u2014 our bubble text generator makes your handle memorable without breaking the platform's character limits or rendering badly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">WhatsApp Status and Group Names<\/div>\r\n                    <p class=\"pg-btg-desc\">Make your WhatsApp group chats feel lighter and more fun with bubbly group names \u2014 our bubble text generator output renders perfectly in chat headers and status updates on both iOS and Android.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">YouTube Channel Branding<\/div>\r\n                    <p class=\"pg-btg-desc\">Gaming, family, and lifestyle YouTubers use our bubble text generator for channel names and video titles \u2014 the rounded text creates a friendly, non-intimidating brand identity that attracts subscribers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-blog\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Personal Blogs and Newsletters<\/div>\r\n                    <p class=\"pg-btg-desc\">Use bubbly text for blog headings, newsletter titles, or section dividers \u2014 our bubble text generator adds a whimsical touch to long-form content that keeps readers engaged and smiling.<\/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            --btg-pink: #f06292;\r\n            --btg-grad: linear-gradient(135deg, #f06292, #ba68c8, #4dd0e1);\r\n            --btg-shadow: 0 12px 30px rgba(240, 98, 146, 0.16);\r\n            --btg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --btg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --btg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-btg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--btg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-btg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-btg-heading {\r\n            font-family: var(--btg-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-btg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-btg-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(--btg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--btg-ease);\r\n        }\r\n\r\n        .pg-btg-section:hover .pg-btg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-sub {\r\n            font-family: var(--btg-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-btg-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        .pg-btg-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(--btg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-btg-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(--btg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--btg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-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(240,98,146,0.10) 0%, rgba(186,104,200,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-btg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        .pg-btg-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(--btg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-btg-card:hover .pg-btg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down .pg-btg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .pg-btg-title {\r\n            font-family: var(--btg-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        .pg-btg-desc {\r\n            font-family: var(--btg-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        .pg-btg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec1 .pg-btg-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-btg-sec1 .pg-btg-card:hover {\r\n            border-color: var(--btg-pink);\r\n            box-shadow: var(--btg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-btg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-heading.pg-btg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-kw.pg-btg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-kw.pg-btg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #f06292, #4dd0e1, #ffffff);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-sub.pg-btg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-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-btg-sec2 .pg-btg-card.pg-btg-sec2-card::before {\r\n            background: linear-gradient(90deg, #f06292, #764ba2, #4dd0e1);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(240,98,146,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-sec2-card:hover {\r\n            border-color: rgba(240,98,146,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-btg-sec3 {\r\n            background: #fef0f6;\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0dce3;\r\n            box-shadow: 0 2px 8px rgba(240,98,146,0.04);\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card::before {\r\n            background: linear-gradient(90deg, #f06292, #ba68c8, #4dd0e1);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card:hover {\r\n            border-color: var(--btg-pink);\r\n            box-shadow: var(--btg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        @media (max-width: 820px) {\r\n            .pg-btg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-btg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-btg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-btg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-btg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-btg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-btg-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-btg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-btg-glow', 'pg-btg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-btg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-btg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-btg-glow', 'pg-btg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-btg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-btg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-btg-down', 'pg-btg-glow', 'pg-btg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-btg-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-btg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-btg-down', 'pg-btg-glow', 'pg-btg-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 Bubble 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    .bt-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* BUBBLE THEME PALETTE - Iridescent & Glassy *\/\r\n        --theme-panel: rgba(20, 12, 35, 0.85); \r\n        --theme-border: rgba(255, 255, 255, 0.25);\r\n        \r\n        \/* BUBBLE ACCENTS *\/\r\n        --bt-pink: #ffb6c1;\r\n        --bt-lavender: #e6e6fa;\r\n        --bt-mint: #b5f5ec;\r\n        --bt-cyan: #87ceeb;\r\n        --bt-pearl: #f0f8ff;\r\n        --void-dark: #0a0512;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c0b0e0;\r\n        \r\n        \/* GRADIENTS *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-iridescent: linear-gradient(135deg, #ffb6c1 0%, #e6e6fa 50%, #b5f5ec 100%);\r\n        --grad-bubble-surface: linear-gradient(180deg, rgba(60, 40, 80, 0.6) 0%, rgba(20, 10, 30, 0.8) 100%);\r\n        --grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(15, 8, 25, 0.9) 0%, rgba(8, 4, 15, 0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-pearl: 0 0 25px rgba(255, 255, 255, 0.2);\r\n        --glow-cyan: 0 0 20px rgba(135, 206, 235, 0.5);\r\n        --shadow-ui: 0 25px 60px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(20px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\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% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .bt-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .bt-container {\r\n        max-width: 1100px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .bt-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 15px;\r\n        width: 100%;\r\n    }\r\n\r\n    .bt-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 12px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);\r\n        max-width: 900px;\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: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .bt-main-title i {\r\n        background: var(--grad-iridescent);\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        color: transparent;\r\n        filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.6));\r\n        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;\r\n        animation: bt-bubble-pop 4s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes bt-bubble-pop {\r\n        0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }\r\n        50% { transform: scale(1.1) translateY(-6px) rotate(5deg); }\r\n    }\r\n    \r\n    .bt-main-title:hover i {\r\n        transform: scale(1.3) rotate(15deg);\r\n        filter: drop-shadow(0 0 20px rgba(135, 206, 235, 0.8));\r\n    }\r\n\r\n    .bt-main-title:hover {\r\n        letter-spacing: 8px;\r\n        text-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 0 40px rgba(135, 206, 235, 0.4);\r\n    }\r\n    \r\n    .bt-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -14px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 3px;\r\n        background: var(--grad-iridescent);\r\n        box-shadow: var(--glow-pearl);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease;\r\n    }\r\n    \r\n    .bt-main-title:hover::after { width: 60%; }\r\n    \r\n    .bt-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(240, 248, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 400;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - Iridescent Glass Box *\/\r\n    .bt-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border);\r\n        border-top: 1px solid rgba(255, 255, 255, 0.4); \/* Light reflection on top *\/\r\n        box-shadow: \r\n            var(--shadow-ui), \r\n            inset 0 0 0 1px rgba(255, 255, 255, 0.05),\r\n            inset 0 20px 40px rgba(255, 255, 255, 0.05);\r\n        border-radius: 24px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    \/* Iridescent sheen effect on hover *\/\r\n    .bt-generator-card:hover {\r\n        box-shadow: \r\n            0 30px 70px rgba(0, 0, 0, 0.9), \r\n            0 0 30px rgba(135, 206, 235, 0.2),\r\n            inset 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n    }\r\n\r\n    .bt-controls-wrapper {\r\n        padding: 30px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n        border-radius: 24px 24px 0 0; \/* Inner rounding *\/\r\n    }\r\n\r\n    .bt-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* INPUT BOX - Clear Glass *\/\r\n    .bt-enhanced-input-wrapper {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        border-radius: 16px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.5);\r\n        position: relative;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .bt-enhanced-input-wrapper:focus-within {\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: \r\n            inset 0 0 20px rgba(0,0,0,0.5),\r\n            0 0 15px rgba(135, 206, 235, 0.3);\r\n    }\r\n    \r\n    .bt-text-input {\r\n        width: 100% !important;\r\n        min-height: 140px !important;\r\n        padding: 24px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.6rem !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: none;\r\n        line-height: 1.5;\r\n        position: relative;\r\n        z-index: 2;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-text-input::placeholder { \r\n        color: rgba(255, 255, 255, 0.3); \r\n        font-style: italic; \r\n    }\r\n\r\n    .bt-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(0, 0, 0, 0.3);\r\n        padding: 14px 18px;\r\n        border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .bt-toolbar-btn {\r\n        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));\r\n        color: var(--bt-lavender);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        border-radius: 12px; \/* Pill shape *\/\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .bt-toolbar-btn:hover {\r\n        background: rgba(135, 206, 235, 0.2);\r\n        color: #fff;\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3);\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .bt-preset-select {\r\n        background: rgba(135, 206, 235, 0.1);\r\n        color: var(--bt-cyan);\r\n        border: 1px solid rgba(135, 206, 235, 0.3);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 12px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        max-width: 220px;\r\n        width: 100%;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%2387ceeb' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 14px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-preset-select:hover, .bt-preset-select:focus {\r\n        background-color: rgba(135, 206, 235, 0.25);\r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 0 12px rgba(135, 206, 235, 0.4);\r\n    }\r\n    \r\n    .bt-preset-select option { background: #1a1025; color: #fff; }\r\n\r\n    .bt-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 18px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* SETTINGS BOXES - Soft Tinted Glass Pods *\/\r\n    .bt-settings-section > div {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 18px;\r\n        padding: 18px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .bt-settings-section > div:hover { \r\n        border-color: rgba(255, 255, 255, 0.3); \r\n        background: rgba(255, 255, 255, 0.06);\r\n    }\r\n\r\n    .bt-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.72rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.9);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.2px;\r\n        margin-bottom: 12px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n    \r\n    .bt-panel-label i { color: var(--bt-pink); margin-right: 8px; text-shadow: 0 0 8px var(--bt-pink); }\r\n\r\n    .bt-grid-options {\r\n        display: grid;\r\n        gap: 8px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    \/* OPTION BUTTONS - Bubble Bubbles *\/\r\n    .bt-option-btn {\r\n        background: rgba(0, 0, 0, 0.2);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        padding: 12px 6px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.68rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 12px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.4px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .bt-option-btn i { font-size: 1.1rem; transition: var(--transition-ui); }\r\n\r\n    .bt-option-btn:hover {\r\n        background: rgba(135, 206, 235, 0.15);\r\n        border-color: var(--bt-cyan);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.4), 0 0 10px rgba(135, 206, 235, 0.2);\r\n    }\r\n    \r\n    .bt-option-btn:hover i { transform: scale(1.2) rotate(10deg); color: var(--bt-pink); }\r\n\r\n    .bt-option-btn.active { \r\n        background: linear-gradient(135deg, rgba(135, 206, 235, 0.3), rgba(255, 182, 193, 0.2));\r\n        color: #fff; \r\n        border-color: var(--bt-lavender);\r\n        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);\r\n    }\r\n    \r\n    .bt-option-btn.active i {\r\n        color: var(--bt-mint);\r\n        text-shadow: 0 0 10px var(--bt-mint);\r\n    }\r\n\r\n    .bt-results-area { \r\n        padding: 35px 25px; \r\n        position: relative; \r\n        background: transparent;\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .bt-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr !important;\r\n        gap: 18px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* RESULT CARD - Glassy Bubble Box *\/\r\n    .bt-result-card {\r\n        background: linear-gradient(160deg, rgba(40, 25, 60, 0.8) 0%, rgba(20, 12, 30, 0.9) 100%);\r\n        border: 1px solid rgba(255, 255, 255, 0.12);\r\n        border-top: 1px solid rgba(255, 255, 255, 0.25); \/* Top light *\/\r\n        border-radius: 20px;\r\n        padding: 24px 28px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    \/* Iridescent strip on hover *\/\r\n    .bt-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-iridescent);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .bt-result-card:hover {\r\n        transform: translateY(-5px) scale(1.005);\r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(135, 206, 235, 0.15);\r\n        background: linear-gradient(160deg, rgba(60, 40, 80, 0.85) 0%, rgba(30, 18, 45, 0.95) 100%);\r\n        border-color: rgba(255, 182, 193, 0.4);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .bt-result-card:hover::after { opacity: 1; }\r\n\r\n    .bt-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 10px;\r\n        padding-bottom: 10px;\r\n    }\r\n    \r\n    .bt-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.78rem;\r\n        font-weight: 800;\r\n        color: var(--bt-lavender);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .bt-card-title i {\r\n        color: var(--bt-pink);\r\n        font-size: 1rem;\r\n        transition: transform 0.3s ease;\r\n        text-shadow: 0 0 5px rgba(255, 182, 193, 0.4);\r\n    }\r\n\r\n    .bt-result-card:hover .bt-card-title { color: #fff; }\r\n    .bt-result-card:hover .bt-card-title i { transform: rotate(15deg) scale(1.2); color: var(--bt-mint); }\r\n\r\n    .bt-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.08);\r\n        border: 1px solid rgba(255, 255, 255, 0.15);\r\n        color: var(--text-bright);\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    \r\n    .bt-card-copy-btn i { transition: transform 0.25s ease; }\r\n    \r\n    .bt-card-copy-btn:hover {\r\n        background: var(--bt-cyan);\r\n        border-color: var(--bt-cyan);\r\n        color: #0a0512;\r\n        box-shadow: 0 0 15px rgba(135, 206, 235, 0.6);\r\n        transform: rotate(-5deg) scale(1.1);\r\n    }\r\n    \r\n    .bt-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .bt-card-preview {\r\n        font-size: 1.5rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        padding: 5px 0; \r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        \r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 0 1px 2px rgba(0,0,0,0.5);\r\n        line-height: 1.6;\r\n        max-height: 160px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .bt-result-card:hover .bt-card-preview { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }\r\n\r\n    .bt-btn-load {\r\n        background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        padding: 16px 40px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 0.95rem;\r\n        cursor: pointer;\r\n        margin-top: 35px;\r\n        text-transform: uppercase;\r\n        border-radius: 14px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 1.5px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        gap: 10px;\r\n        overflow: hidden;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.3);\r\n    }\r\n    \r\n    .bt-btn-load:hover { \r\n        background: linear-gradient(135deg, rgba(135, 206, 235, 0.2), rgba(255, 182, 193, 0.15)); \r\n        border-color: var(--bt-cyan);\r\n        box-shadow: 0 8px 25px rgba(135, 206, 235, 0.3);\r\n        transform: translateY(-4px);\r\n    }\r\n    \r\n    .bt-btn-load:hover i { transform: translateY(5px); color: var(--bt-mint); }\r\n    \r\n    .bt-toast {\r\n        visibility: hidden;\r\n        background: linear-gradient(135deg, #201535, #0f0a1c);\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 14px 28px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 35px;\r\n        transform: translateX(-50%) translateY(15px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 14px;\r\n        border: 1px solid var(--bt-cyan);\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(135, 206, 235, 0.3);\r\n        letter-spacing: 0.8px;\r\n        opacity: 0;\r\n        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .bt-toast i { color: var(--bt-pink); text-shadow: 0 0 5px var(--bt-pink); }\r\n    .bt-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 900px) {\r\n        .bt-main-title { font-size: 2.6rem; }\r\n        .bt-settings-section { flex-direction: column; }\r\n        .bt-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .bt-container { padding: 25px 12px !important; }\r\n        .bt-results-area { padding: 25px 12px; }\r\n        .bt-controls-wrapper { padding: 18px; gap: 12px; }\r\n        .bt-text-input { min-height: 100px !important; font-size: 1.3rem !important; }\r\n        .bt-input-toolbar { flex-direction: column; align-items: stretch; }\r\n        .bt-preset-select { max-width: 100%; }\r\n        .bt-btn-load { padding: 14px 25px; font-size: 0.85rem; width: 100%; }\r\n        .bt-main-title { font-size: 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"bt-tool-wrapper\" id=\"bt-bubble-text-tool\">\r\n    <div class=\"bt-container bt-hero-content-wrapper\">\r\n        <h1 class=\"bt-main-title\"><i class=\"fa-solid fa-circle-dot\"><\/i> Bubble Text Generator \u2013 Style Instantly<\/h1>\r\n        <p class=\"bt-subtitle\">Pump up your words with circled bubbles, soft puffy styling, and dreamy accents. Create cute, readable Unicode text that stays perfectly copy-safe across all platforms.<\/p>\r\n        \r\n        <div class=\"bt-generator-card\">\r\n            <div class=\"bt-controls-wrapper\">\r\n                \r\n                <div class=\"bt-input-section\">\r\n                    <div class=\"bt-enhanced-input-wrapper\">\r\n                        <textarea class=\"bt-text-input\" id=\"btInputText\" placeholder=\"Blow some bubbles...\"><\/textarea>\r\n                        \r\n                        <div class=\"bt-input-toolbar\">\r\n                            <div style=\"display: flex; gap: 10px; flex-wrap: wrap;\">\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"bt-toolbar-btn\" id=\"btBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            \r\n                            <select class=\"bt-preset-select\" id=\"btPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83e\udee7 Bubble Presets<\/option>\r\n                                <option value=\"POP! Bubble Wrap Energy\">Pop Energy<\/option>\r\n                                <option value=\"Soft Clouds & Sweet Dreams\">Cloud Dreams<\/option>\r\n                                <option value=\"S P A C E   F L O A T\">Space Float<\/option>\r\n                                <option value=\"Cute & Comfy Vibes Only\">Cute Vibes<\/option>\r\n                                <option value=\"\u3010 P R O C E S S I N G \u3011\">Data Bubble<\/option>\r\n                                <option value=\"\u2605 S T A R D U S T \u2605\">Stardust<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"bt-settings-section\">\r\n                    <div>\r\n                        <div class=\"bt-panel-label\"><i class=\"fa-solid fa-shapes\"><\/i> Bubble Mode<\/div>\r\n                        <div class=\"bt-grid-options\">\r\n                            <button class=\"bt-option-btn mode-btn active\" data-val=\"Circled\">\r\n                                <i class=\"fa-regular fa-circle\"><\/i> Circled\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Puffy\">\r\n                                <i class=\"fa-solid fa-cloud\"><\/i> Soft Puffy\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn mode-btn\" data-val=\"Squared\">\r\n                                <i class=\"fa-regular fa-square\"><\/i> Squared\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"bt-panel-label\"><i class=\"fa-solid fa-wand-sparkles\"><\/i> Flow Style<\/div>\r\n                        <div class=\"bt-grid-options\">\r\n                            <button class=\"bt-option-btn style-btn active\" data-val=\"Spaced\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i> Spaced\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"Cluster\">\r\n                                <i class=\"fa-solid fa-circle-nodes\"><\/i> Cluster\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"SoftGlitch\">\r\n                                <i class=\"fa-solid fa-ghost\"><\/i> Soft Glitch\r\n                            <\/button>\r\n                            <button class=\"bt-option-btn style-btn\" data-val=\"Framed\">\r\n                                <i class=\"fa-regular fa-square-full\"><\/i> Framed\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"bt-results-area\">\r\n                <div class=\"bt-result-list\" id=\"btResultList\"><\/div>\r\n                <button class=\"bt-btn-load\" id=\"btLoadMoreBtn\"><span>Pop More Bubbles<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"btToast\" class=\"bt-toast\"><i class=\"fa-solid fa-circle-check\"><\/i> Bubble Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('bt-bubble-text-tool');\r\n    const inputEl = wrapper.querySelector('#btInputText');\r\n    const resultList = wrapper.querySelector('#btResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#btLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#btToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#btBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#btBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#btBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#btPresetSelect');\r\n\r\n    let currentMode = 'Circled';\r\n    let currentStyle = 'Spaced';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const circledLower = \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\";\r\n    const circledUpper = \"\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\";\r\n    const circledNums = \"\u24ea\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\";\r\n    const circledMap = (circledLower + circledUpper + circledNums).split('');\r\n    \r\n    const squaredLower = \"\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd48\ud83c\udd49\";\r\n    const squaredUpper = \"\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd85\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\";\r\n    const squaredNums = \"0123456789\";\r\n    const squaredMap = (squaredLower + squaredUpper + squaredNums).split('');\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\u21280123456789\".split('');\r\n    const fullwidthMap = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19\".split('');\r\n\r\n    const puffySymbols = ['\uff61', '\uff65', '\uff9f', '\u2727', '\u2606', '\u00b0', '\u2601', '\u263e', '\u2740', '\u274b', '\ua565', '\u22b9', '\u2734', '\u22c6'];\r\n    const frameSymbols = ['\u3010', '\u3011', '\u300e', '\u300f', '\u3016', '\u3017', '\u300c', '\u300d', '\u230a', '\u230b'];\r\n\r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const originalHTML = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--bt-pink)';\r\n            btn.style.borderColor = 'var(--bt-pink)';\r\n            btn.style.color = '#fff';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalHTML;\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 1500);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Soft Pop', 'Cloud Drift', 'Puffy Star', 'Bubble Gum', \r\n            'Dream Float', 'Cute Sphere', 'Pastel Cloud', 'Misty Orb',\r\n            'Gothic Bubble', 'Velvet Pop', 'Starry Cluster', 'Fuzzy Logic',\r\n            'Pillow Talk', 'Marshmallow', 'Cotton Candy', 'Silk Wave',\r\n            'Lullaby Pop', 'Moonlit Orb', 'Halo Effect', 'Aura Glow'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `bubble-${i}`,\r\n                name: names[i % names.length] + ` v${Math.floor(Math.random()*9)+1}.0`,\r\n                icon: ['cloud', 'star', 'droplet', 'sparkles', 'circle-nodes', 'heart', 'moon', 'gem'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let chars = Array.from(text);\r\n        let result = \"\";\r\n\r\n        \/\/ 1. Mode\r\n        if (mode === 'Circled') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? circledMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Puffy') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? fullwidthMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Gothic') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? gothicMap[idx] : c;\r\n            }).join('');\r\n        } else if (mode === 'Squared') {\r\n            result = chars.map(c => {\r\n                const idx = baseChars.indexOf(c);\r\n                return idx !== -1 ? squaredMap[idx] : c;\r\n            }).join('');\r\n        }\r\n\r\n        \/\/ 2. Style\r\n        if (style === 'Spaced') {\r\n            result = Array.from(result).join(' ');\r\n        } else if (style === 'Cluster') {\r\n            result = chars.map((c, i) => {\r\n                let base = result[i] || c;\r\n                return (i % 2 === 0) ? puffySymbols[rand(puffySymbols.length)] + base : base + puffySymbols[rand(puffySymbols.length)];\r\n            }).join(' ');\r\n        } else if (style === 'SoftGlitch') {\r\n            result = Array.from(result).map((c, i) => {\r\n                if(i % 4 === 0 && rand(3) > 0) {\r\n                    return c + '\u0337' + '\u0334';\r\n                }\r\n                return c;\r\n            }).join('');\r\n        } else if (style === 'Framed') {\r\n            const f = (variationIndex % 5) * 2;\r\n            result = `${frameSymbols[f]} ${result} ${frameSymbols[f+1]}`;\r\n        }\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Blow some bubbles...\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'bt-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"bt-card-header\">\r\n                    <div class=\"bt-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"bt-card-copy-btn\" title=\"Copy Bubble Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"bt-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.bt-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Pop More Bubbles (${remaining})`;\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-check';\r\n            toast.querySelector('i').nextSibling.textContent = ' Base Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-circle-check';\r\n                toast.querySelector('i').nextSibling.textContent = ' Bubble Copied';\r\n            }, 1500);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6;\r\n            render(); \r\n        });\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            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Bubble Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n <section class=\"pg-btg-section pg-btg-sec1\">\r\n        <div class=\"pg-btg-wrap\">\r\n\r\n<\/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    <section class=\"pg-btg-section pg-btg-sec1\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading\">What Makes This <span class=\"pg-btg-kw\">Bubble Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-btg-sub\">Most text converters rely on fake bolding or messy letter-spacing to mimic bubble letters. Our bubble text generator uses precise Unicode circled and enclosed blocks to create perfectly round, authentic bubble characters that render beautifully everywhere.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(240,98,146,0.12);color:#f06292;\"><i class=\"fa-solid fa-soap\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Authentic Unicode Bubbles<\/div>\r\n                    <p class=\"pg-btg-desc\">Our bubble text generator maps every character to its precise Unicode circled equivalent \u2014 not fake CSS tricks \u2014 so your letters render as genuinely round, bouncy bubbles on any device or platform.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Multiple Bubble Styles<\/div>\r\n                    <p class=\"pg-btg-desc\">Choose from filled bubbles (\u24d1\u24e4\u24d1\u24d1\u24db\u24d4), outlined circles (\u24b7\u24e4\u24d1\u24d1\u24db\u24d4), and squared bubbles (\ud83c\udd51\ud83c\udd64\ud83c\udd51\ud83c\udd51\ud83c\udd5b\ud83c\udd54) \u2014 our bubble text generator gives you three distinct playful formats for any mood or design need.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(77,208,225,0.12);color:#4dd0e1;\"><i class=\"fa-solid fa-bezier-curve\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Flawless Curved Rendering<\/div>\r\n                    <p class=\"pg-btg-desc\">Bubble text often breaks into ugly squares on older devices \u2014 our bubble text generator exclusively uses widely-supported Unicode blocks so every curve renders perfectly on iOS, Android, and desktop.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-btg-desc\">Found the perfect bubble style? One click copies the formatted text to your clipboard \u2014 our bubble text generator preserves every single circle and enclosure symbol perfectly through the copy-paste process.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-share-from-square\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Social Media Optimized<\/div>\r\n                    <p class=\"pg-btg-desc\">Our bubble text generator is tested across Instagram, TikTok, Twitter, and Discord to ensure your bubbly usernames and captions display correctly without ugly missing-character rectangles.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">No Custom Fonts Required<\/div>\r\n                    <p class=\"pg-btg-desc\">Unlike font downloads that only work on your computer, our bubble text generator creates pure Unicode text \u2014 the receiver sees the exact same bubble letters without installing anything.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-btg-section pg-btg-sec2\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading pg-btg-sec2-heading\">How to Use Our <span class=\"pg-btg-kw pg-btg-sec2-kw\">Bubble Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-btg-sub pg-btg-sec2-sub\">Creating bouncy, rounded text takes exactly seconds. No design skills or special software needed \u2014 just follow these simple steps and get your perfect bubble text ready to paste anywhere.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 1: Type Your Regular Text<\/div>\r\n                    <p class=\"pg-btg-desc\">Enter any word, name, or phrase into the input box \u2014 our bubble text generator accepts standard English letters, numbers, and common punctuation as the base for your bubbly transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(240,98,146,0.12);color:#f06292;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 2: Choose a Bubble Style<\/div>\r\n                    <p class=\"pg-btg-desc\">Select from filled circles, outlined rings, or squared bubbles \u2014 our bubble text generator displays all variations instantly so you can pick the exact roundness and weight that fits your vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 3: Adjust Spacing and Case<\/div>\r\n                    <p class=\"pg-btg-desc\">Toggle letter spacing or switch between uppercase and lowercase bubbles \u2014 our bubble text generator gives you fine control over how dense or airy your bubbly text layout feels.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(77,208,225,0.12);color:#4dd0e1;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 4: Preview the Bubbles<\/div>\r\n                    <p class=\"pg-btg-desc\">See exactly how your bubble text looks before copying \u2014 our bubble text generator shows a live preview that mirrors precisely what the text will look like when pasted on your favorite social platform.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 5: Copy the Output<\/div>\r\n                    <p class=\"pg-btg-desc\">Hit the copy button next to your chosen style \u2014 our bubble text generator transfers the Unicode text to your clipboard with every single circular character preserved intact.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec2-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Step 6: Paste Anywhere<\/div>\r\n                    <p class=\"pg-btg-desc\">Drop your bubble text into usernames, bios, or messages \u2014 our bubble text generator output works natively on any app that supports standard Unicode text input.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-btg-section pg-btg-sec3\">\r\n        <div class=\"pg-btg-wrap\">\r\n            <h2 class=\"pg-btg-heading\">Best Places to Use <span class=\"pg-btg-kw\">Bubble Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-btg-sub\">Bubble text instantly softens your digital presence and makes it feel more playful and approachable. Here are the highest-impact places where our bubble text generator output transforms ordinary text into eye-catching content.<\/p>\r\n            <div class=\"pg-btg-grid\">\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Instagram Bios and Display Names<\/div>\r\n                    <p class=\"pg-btg-desc\">A bubbly Instagram display name stands out instantly in search results and DMs \u2014 our bubble text generator creates the exact rounded aesthetic that signals a fun, curated, and approachable profile.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">TikTok Captions and Comments<\/div>\r\n                    <p class=\"pg-btg-desc\">Bubble text in TikTok comments grabs attention in a sea of plain text \u2014 our bubble text generator gives your replies and captions that bouncy, playful edge that drives likes and replies.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(0,0,0,0.08);color:#000000;\"><i class=\"fa-brands fa-x-twitter\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Twitter\/X Display Names<\/div>\r\n                    <p class=\"pg-btg-desc\">Stand out in Twitter mentions and followers lists with a bubble text display name \u2014 our bubble text generator makes your handle memorable without breaking the platform's character limits or rendering badly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">WhatsApp Status and Group Names<\/div>\r\n                    <p class=\"pg-btg-desc\">Make your WhatsApp group chats feel lighter and more fun with bubbly group names \u2014 our bubble text generator output renders perfectly in chat headers and status updates on both iOS and Android.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">YouTube Channel Branding<\/div>\r\n                    <p class=\"pg-btg-desc\">Gaming, family, and lifestyle YouTubers use our bubble text generator for channel names and video titles \u2014 the rounded text creates a friendly, non-intimidating brand identity that attracts subscribers.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-btg-card pg-btg-sec3-card\">\r\n                    <div class=\"pg-btg-icon\" style=\"background:rgba(186,104,200,0.12);color:#ba68c8;\"><i class=\"fa-solid fa-blog\"><\/i><\/div>\r\n                    <div class=\"pg-btg-title\">Personal Blogs and Newsletters<\/div>\r\n                    <p class=\"pg-btg-desc\">Use bubbly text for blog headings, newsletter titles, or section dividers \u2014 our bubble text generator adds a whimsical touch to long-form content that keeps readers engaged and smiling.<\/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            --btg-pink: #f06292;\r\n            --btg-grad: linear-gradient(135deg, #f06292, #ba68c8, #4dd0e1);\r\n            --btg-shadow: 0 12px 30px rgba(240, 98, 146, 0.16);\r\n            --btg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --btg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --btg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-btg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--btg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-btg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-btg-heading {\r\n            font-family: var(--btg-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-btg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-btg-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(--btg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--btg-ease);\r\n        }\r\n\r\n        .pg-btg-section:hover .pg-btg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-sub {\r\n            font-family: var(--btg-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-btg-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        .pg-btg-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(--btg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-btg-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(--btg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--btg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-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(240,98,146,0.10) 0%, rgba(186,104,200,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-btg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        .pg-btg-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(--btg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-btg-card:hover .pg-btg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-btg-card.pg-btg-down .pg-btg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .pg-btg-title {\r\n            font-family: var(--btg-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        .pg-btg-desc {\r\n            font-family: var(--btg-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        .pg-btg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec1 .pg-btg-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-btg-sec1 .pg-btg-card:hover {\r\n            border-color: var(--btg-pink);\r\n            box-shadow: var(--btg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-btg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-heading.pg-btg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-kw.pg-btg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-kw.pg-btg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #f06292, #4dd0e1, #ffffff);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-sub.pg-btg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-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-btg-sec2 .pg-btg-card.pg-btg-sec2-card::before {\r\n            background: linear-gradient(90deg, #f06292, #764ba2, #4dd0e1);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(240,98,146,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-btg-sec2 .pg-btg-card.pg-btg-sec2-card:hover {\r\n            border-color: rgba(240,98,146,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-btg-sec3 {\r\n            background: #fef0f6;\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #f0dce3;\r\n            box-shadow: 0 2px 8px rgba(240,98,146,0.04);\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card::before {\r\n            background: linear-gradient(90deg, #f06292, #ba68c8, #4dd0e1);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-btg-sec3 .pg-btg-card.pg-btg-sec3-card:hover {\r\n            border-color: var(--btg-pink);\r\n            box-shadow: var(--btg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        @media (max-width: 820px) {\r\n            .pg-btg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-btg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-btg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-btg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-btg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-btg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-btg-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-btg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-btg-glow', 'pg-btg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-btg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-btg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-btg-glow', 'pg-btg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-btg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-btg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-btg-down', 'pg-btg-glow', 'pg-btg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-btg-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-btg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-btg-down', 'pg-btg-glow', 'pg-btg-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-542","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 a bolle: personalizza lo stile all&#039;istante.<\/title>\n<meta name=\"description\" content=\"Crea divertenti testi a bolle con il nostro generatore di testo a bolle gratuito. Trasforma qualsiasi testo in lettere audaci e arrotondate in stile bolla, copia e incolla...\" \/>\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\/bubble-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bubble Text Generator \u2013 Style Instantly\" \/>\n<meta property=\"og:description\" content=\"Create fun bubble text with our free Bubble Text Generator. Transform any text into bold, rounded bubble-style letters copy &amp; paste in...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/bubble-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T08:55:33+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\\\/bubble-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/bubble-text-generator\\\/\",\"name\":\"Bubble Text Generator \u2013 Style Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-28T00:00:34+00:00\",\"dateModified\":\"2026-04-06T08:55:33+00:00\",\"description\":\"Create fun bubble text with our free Bubble Text Generator. Transform any text into bold, rounded bubble-style letters copy & paste in...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/bubble-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/bubble-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/bubble-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bubble Text Generator \u2013 Style 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 a bolle: personalizza lo stile all&#39;istante.","description":"Crea divertenti testi a bolle con il nostro generatore di testo a bolle gratuito. Trasforma qualsiasi testo in lettere audaci e arrotondate in stile bolla, copia e incolla...","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\/bubble-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Bubble Text Generator \u2013 Style Instantly","og_description":"Create fun bubble text with our free Bubble Text Generator. Transform any text into bold, rounded bubble-style letters copy & paste in...","og_url":"https:\/\/onlinetexteditor.io\/bubble-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T08:55:33+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/bubble-text-generator\/","url":"https:\/\/onlinetexteditor.io\/bubble-text-generator\/","name":"Bubble Text Generator \u2013 Style Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-28T00:00:34+00:00","dateModified":"2026-04-06T08:55:33+00:00","description":"Create fun bubble text with our free Bubble Text Generator. Transform any text into bold, rounded bubble-style letters copy & paste in...","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/bubble-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/bubble-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/bubble-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Bubble Text Generator \u2013 Style 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\/542","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=542"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/542\/revisions"}],"predecessor-version":[{"id":545,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/542\/revisions\/545"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/media?parent=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}