{"id":555,"date":"2026-03-10T00:00:02","date_gmt":"2026-03-10T00:00:02","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=555"},"modified":"2026-04-06T09:00:43","modified_gmt":"2026-04-06T09:00:43","slug":"graffiti-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/fr\/graffiti-text-generator\/","title":{"rendered":"Graffiti Text Generator \u2013 Design 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 Graffiti 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    .gr-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --heading-font: Impact, \"Arial Black\", sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* GRAFFITI NEON PALETTE *\/\r\n        --neon-pink: #ff007f;\r\n        --neon-green: #39ff14;\r\n        --neon-yellow: #ffe600;\r\n        --neon-blue: #00f0ff;\r\n        --neon-purple: #bf00ff;\r\n        --concrete: #1a1a1a;\r\n        --wall-bg: #111111;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #a0a0a0;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-graffiti: linear-gradient(90deg, #ff007f, #ffe600, #39ff14, #00f0ff, #bf00ff);\r\n        --grad-wall: linear-gradient(180deg, rgba(17,17,17,0.95) 0%, rgba(10,10,10,0.99) 100%);\r\n        --grad-spray: linear-gradient(135deg, rgba(255,0,127,0.2), rgba(57,255,20,0.2));\r\n        \r\n        --glow-pink: 0 0 15px rgba(255, 0, 127, 0.6);\r\n        --glow-green: 0 0 15px rgba(57, 255, 20, 0.5);\r\n        --glow-yellow: 0 0 15px rgba(255, 230, 0, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(12px);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .gr-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .gr-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .gr-hero-content-wrapper { z-index: 2; padding-top: 10px; width: 100%; }\r\n\r\n    .gr-main-title {\r\n        font-family: var(--heading-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        background: var(--grad-graffiti);\r\n        background-size: 200% 100%;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        color: transparent;\r\n        filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 10px rgba(255,0,127,0.5));\r\n        animation: gr-text-flow 4s linear infinite;\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        gap: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    @keyframes gr-text-flow {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 200% 50%; }\r\n    }\r\n    \r\n    .gr-main-title i {\r\n        -webkit-text-fill-color: var(--neon-yellow);\r\n        text-shadow: var(--glow-yellow);\r\n        filter: none;\r\n        animation: gr-spray 2.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes gr-spray {\r\n        0%, 100% { transform: scale(1) rotate(0deg); }\r\n        25% { transform: scale(1.1) rotate(-10deg); }\r\n        75% { transform: scale(0.95) rotate(5deg); }\r\n    }\r\n\r\n    .gr-main-title:hover i { animation: none; transform: scale(1.3) rotate(-20deg); }\r\n    \r\n    .gr-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -12px; left: 50%; transform: translateX(-50%);\r\n        width: 80px; height: 4px;\r\n        background: var(--grad-graffiti);\r\n        background-size: 200% 100%;\r\n        animation: gr-text-flow 4s linear infinite;\r\n        box-shadow: var(--glow-pink);\r\n        border-radius: 3px;\r\n        transition: width 0.4s ease;\r\n    }\r\n    \r\n    .gr-main-title:hover::after { width: 60%; }\r\n\r\n    .gr-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(255,255,255,0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.7);\r\n    }\r\n\r\n    .gr-generator-card {\r\n        background: var(--wall-bg);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n        border-top: 5px solid var(--neon-pink);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 18px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    \/* Concrete brick pattern overlay *\/\r\n    .gr-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\r\n        background-size: 40px 20px;\r\n        pointer-events: none;\r\n        z-index: 0;\r\n    }\r\n\r\n    .gr-controls-wrapper {\r\n        padding: 28px;\r\n        background: var(--grad-wall);\r\n        border-bottom: 1px solid rgba(255, 0, 127, 0.2);\r\n        display: grid;\r\n        grid-template-columns: 1.4fr 1fr;\r\n        gap: 22px;\r\n        align-items: stretch;\r\n        width: 100% !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .gr-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .gr-enhanced-input-wrapper {\r\n        background: rgba(0, 0, 0, 0.7);\r\n        border: 2px solid var(--neon-green);\r\n        border-radius: 14px;\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 15px rgba(0,0,0,0.8), 0 0 0 1px rgba(57, 255, 20, 0.3);\r\n        width: 100% !important;\r\n    }\r\n\r\n    .gr-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--neon-yellow);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 12px rgba(255, 230, 0, 0.4);\r\n    }\r\n    \r\n    .gr-text-input {\r\n        width: 100% !important;\r\n        min-height: 135px !important;\r\n        padding: 20px !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: 600 !important;\r\n        font-size: 1.5rem !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        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .gr-text-input::placeholder { color: rgba(57, 255, 20, 0.35); font-style: italic; }\r\n\r\n    .gr-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: 8px;\r\n        background: rgba(0, 0, 0, 0.8);\r\n        padding: 12px 16px;\r\n        border-top: 2px dashed rgba(255, 0, 127, 0.3);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .gr-toolbar-btn {\r\n        background: rgba(0, 0, 0, 0.5);\r\n        color: var(--text-muted);\r\n        border: 2px solid var(--neon-pink);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .gr-toolbar-btn:hover {\r\n        background: var(--neon-pink);\r\n        color: #fff;\r\n        transform: translateY(-2px) rotate(-2deg);\r\n        box-shadow: var(--glow-pink);\r\n    }\r\n    \r\n    .gr-preset-select {\r\n        background: rgba(0, 240, 255, 0.1);\r\n        color: var(--neon-blue);\r\n        border: 2px solid var(--neon-blue);\r\n        padding: 8px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        max-width: 200px;\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='%2300f0ff' 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 12px center;\r\n    }\r\n    \r\n    .gr-preset-select:hover, .gr-preset-select:focus {\r\n        background-color: var(--neon-blue);\r\n        color: #000;\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n    \r\n    .gr-preset-select option { background: #000; color: #fff; }\r\n\r\n    .gr-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 14px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .gr-settings-section > div {\r\n        background: rgba(0, 0, 0, 0.5);\r\n        border: 1px solid rgba(255, 230, 0, 0.2);\r\n        border-left: 4px solid var(--neon-purple);\r\n        border-radius: 10px;\r\n        padding: 14px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .gr-settings-section > div:hover { border-left-color: var(--neon-green); background: rgba(255, 255, 255, 0.05); }\r\n\r\n    .gr-panel-label {\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        color: var(--neon-yellow);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.2px;\r\n        margin-bottom: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        text-shadow: 0 0 5px rgba(255, 230, 0, 0.4);\r\n    }\r\n    \r\n    .gr-panel-label i { font-size: 0.85rem; }\r\n\r\n    .gr-grid-options {\r\n        display: grid;\r\n        gap: 6px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .gr-option-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 10px 4px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.65rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 4px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .gr-option-btn i { font-size: 1rem; transition: var(--transition-ui); }\r\n\r\n    .gr-option-btn:hover {\r\n        background: rgba(57, 255, 20, 0.15);\r\n        border-color: var(--neon-green);\r\n        color: #fff;\r\n        transform: scale(1.05) rotate(1deg);\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    \r\n    .gr-option-btn:hover i { transform: scale(1.2); color: var(--neon-green); }\r\n\r\n    .gr-option-btn.active {\r\n        background: linear-gradient(135deg, rgba(255, 0, 127, 0.2), rgba(191, 0, 255, 0.2));\r\n        color: var(--neon-yellow);\r\n        border-color: var(--neon-pink);\r\n        box-shadow: 0 0 10px rgba(255, 0, 127, 0.3);\r\n    }\r\n    \r\n    .gr-option-btn.active i { color: var(--neon-pink); }\r\n\r\n    \/* RESULTS AREA *\/\r\n    .gr-results-area { \r\n        padding: 30px 24px; \r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n        background: linear-gradient(180deg, var(--wall-bg) 0%, #000 100%);\r\n    }\r\n    \r\n    .gr-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 18px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* GRAFFITI CARD *\/\r\n    .gr-result-card {\r\n        background: rgba(15, 15, 15, 0.95);\r\n        border: 2px solid rgba(255, 255, 255, 0.1);\r\n        border-top: 3px solid var(--neon-blue);\r\n        border-left: 4px solid var(--neon-purple);\r\n        border-radius: 12px;\r\n        padding: 18px 22px;\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        min-height: 125px; \r\n        box-sizing: border-box;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    \/* Hover Highlight Sweep *\/\r\n    .gr-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));\r\n        transition: width 0.3s ease;\r\n        opacity: 0.8;\r\n        z-index: 1;\r\n    }\r\n    \r\n    .gr-result-card:hover {\r\n        transform: translateY(-5px) scale(1.01) rotate(0.5deg);\r\n        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(57, 255, 20, 0.25);\r\n        border-color: var(--neon-green);\r\n        background: rgba(20, 20, 20, 0.98);\r\n    }\r\n    \r\n    .gr-result-card:hover::after { width: 5px; }\r\n\r\n    .gr-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 8px;\r\n        padding-bottom: 6px;\r\n        border-bottom: 1px dashed rgba(255, 230, 0, 0.2);\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .gr-card-title {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--neon-yellow);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: var(--transition-fast);\r\n        text-shadow: 0 0 5px rgba(255, 230, 0, 0.3);\r\n    }\r\n    \r\n    .gr-card-title i { color: var(--neon-pink); font-size: 0.9rem; transition: transform 0.3s ease; }\r\n    .gr-result-card:hover .gr-card-title { color: #fff; letter-spacing: 1px; }\r\n    .gr-result-card:hover .gr-card-title i { transform: rotate(-20deg) scale(1.3); color: var(--neon-green); text-shadow: var(--glow-green); }\r\n\r\n    .gr-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: #fff;\r\n        width: 32px; height: 32px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .gr-card-copy-btn:hover {\r\n        background: var(--neon-green);\r\n        color: #000;\r\n        border-color: var(--neon-green);\r\n        transform: scale(1.2) rotate(10deg);\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    \r\n    .gr-card-preview {\r\n        font-size: 1.4rem;\r\n        color: var(--neon-green);\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        flex-grow: 1;\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        line-height: 1.5;\r\n        max-height: 140px;\r\n        overflow-y: auto;\r\n        text-shadow: 0 2px 3px rgba(0,0,0,0.8);\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .gr-result-card:hover .gr-card-preview { color: #fff; text-shadow: 0 0 10px rgba(255, 0, 127, 0.5); }\r\n\r\n    .gr-btn-load {\r\n        background: #000;\r\n        color: var(--neon-yellow);\r\n        border: 2px solid var(--neon-pink);\r\n        padding: 14px 35px;\r\n        font-family: var(--heading-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 25px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-ui);\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 5px 15px rgba(0,0,0,0.5);\r\n        animation: gr-pulse-ring 3s infinite;\r\n        position: relative;\r\n        z-index: 2;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    @keyframes gr-pulse-ring {\r\n        0% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.5), 0 5px 15px rgba(0,0,0,0.5); }\r\n        70% { box-shadow: 0 0 0 14px rgba(255, 0, 127, 0), 0 5px 15px rgba(0,0,0,0.5); }\r\n        100% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0), 0 5px 15px rgba(0,0,0,0.5); }\r\n    }\r\n    \r\n    .gr-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 0, 127, 0.3), transparent);\r\n        transition: left 0.5s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .gr-btn-load:hover { \r\n        background: var(--neon-pink);\r\n        color: #fff;\r\n        border-color: var(--neon-pink);\r\n        transform: translateY(-3px) scale(1.02);\r\n        box-shadow: var(--glow-pink);\r\n    }\r\n    \r\n    .gr-btn-load:hover::before { left: 100%; }\r\n    .gr-btn-load:hover i { transform: translateY(5px); color: #fff; }\r\n    .gr-btn-load:active { transform: translateY(0) scale(0.98); }\r\n\r\n    .gr-toast {\r\n        visibility: hidden;\r\n        background: #000;\r\n        color: #fff;\r\n        padding: 12px 24px;\r\n        position: fixed;\r\n        left: 50%; bottom: 30px;\r\n        transform: translateX(-50%) translateY(10px);\r\n        font-family: var(--heading-font);\r\n        font-weight: 900;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 2px solid var(--neon-green);\r\n        opacity: 0;\r\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    .gr-toast i { color: var(--neon-yellow); }\r\n    .gr-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 900px) {\r\n        .gr-controls-wrapper { grid-template-columns: 1fr; }\r\n        .gr-settings-section { flex-direction: row; }\r\n        .gr-main-title { font-size: 2.6rem; }\r\n    }\r\n\r\n    @media (max-width: 700px) {\r\n        .gr-settings-section { flex-direction: column; }\r\n        .gr-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n        .gr-result-list { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .gr-container { padding: 25px 12px !important; }\r\n        .gr-results-area { padding: 20px 12px; }\r\n        .gr-controls-wrapper { padding: 16px; }\r\n        .gr-text-input { min-height: 100px !important; font-size: 1.2rem !important; }\r\n        .gr-input-toolbar { flex-direction: column; }\r\n        .gr-preset-select { max-width: 100%; }\r\n        .gr-btn-load { padding: 14px 25px; font-size: 0.85rem; width: 100%; }\r\n        .gr-main-title { font-size: 1.9rem; }\r\n        .gr-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"gr-tool-wrapper\" id=\"gr-graffiti-tool\">\r\n    <div class=\"gr-container gr-hero-content-wrapper\">\r\n        <h1 class=\"gr-main-title\"><i class=\"fa-solid fa-spray-can-sparkles\"><\/i> Graffiti Text Generator - Design Instantly<\/h1>\r\n        <p class=\"gr-subtitle\">Tag the digital walls. Transform text into street-style tags, bold urban bubble letters, and wildstyle graffiti that pops with vibrant neon spray-paint energy.<\/p>\r\n        \r\n        <div class=\"gr-generator-card\">\r\n            <div class=\"gr-controls-wrapper\">\r\n                \r\n                <div class=\"gr-input-section\">\r\n                    <div class=\"gr-enhanced-input-wrapper\">\r\n                        <textarea class=\"gr-text-input\" id=\"grInputText\" placeholder=\"Grab the can...\"><\/textarea>\r\n                        <div class=\"gr-input-toolbar\">\r\n                            <div style=\"display:flex; gap:8px; flex-wrap:wrap;\">\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            <select class=\"gr-preset-select\" id=\"grPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83c\udfa8 Street Presets<\/option>\r\n                                <option value=\">>> TAG THE WALL <<<\">Tag The Wall<\/option>\r\n                                <option value=\"\u2605 URBAN KINGS \u2605\">Urban Kings<\/option>\r\n                                <option value=\"[ NO MERCY ]\">No Mercy<\/option>\r\n                                <option value=\"WILDSTYLE BOMBING\">Wildstyle<\/option>\r\n                                <option value=\"NEON NIGHTS 24\/7\">Neon Nights<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"gr-settings-section\">\r\n                    <div>\r\n                        <div class=\"gr-panel-label\"><i class=\"fa-solid fa-spray-can\"><\/i> Tag Style<\/div>\r\n                        <div class=\"gr-grid-options\">\r\n                            <button class=\"gr-option-btn mode-btn active\" data-val=\"StreetTag\">\r\n                                <i class=\"fa-solid fa-signature\"><\/i><span>Street Tag<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"UrbanBubble\">\r\n                                <i class=\"fa-solid fa-circle\"><\/i><span>Urban Bubble<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"Wildstyle\">\r\n                                <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><span>Wildstyle<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"Stencil\">\r\n                                <i class=\"fa-solid fa-stamp\"><\/i><span>Stencil<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"gr-panel-label\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i> Spray FX<\/div>\r\n                        <div class=\"gr-grid-options\">\r\n                            <button class=\"gr-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i><span>Clean<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"Drips\">\r\n                                <i class=\"fa-solid fa-droplet\"><\/i><span>Drips<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"NeonGlow\">\r\n                                <i class=\"fa-solid fa-bolt\"><\/i><span>Neon Glow<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"Wide\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i><span>Wide<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"gr-results-area\">\r\n                <div class=\"gr-result-list\" id=\"grResultList\"><\/div>\r\n                <button class=\"gr-btn-load\" id=\"grLoadMoreBtn\"><span>Bomb More Walls<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"grToast\" class=\"gr-toast\"><i class=\"fa-solid fa-spray-can\"><\/i> Tag Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('gr-graffiti-tool');\r\n    const inputEl = wrapper.querySelector('#grInputText');\r\n    const resultList = wrapper.querySelector('#grResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#grLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#grToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#grBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#grBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#grBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#grPresetSelect');\r\n\r\n    let currentMode = 'StreetTag';\r\n    let currentStyle = 'Clean';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const bold = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const script = \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\u212c\ud835\udc9e\ud835\udc9f\u2130\u2131\ud835\udca2\u210b\u2110\ud835\udca5\ud835\udca6\u2112\u2133\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\u211b\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb5\";\r\n    const gothic = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\";\r\n    const full = \"\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\";\r\n\r\n    const graffitiSymbols = ['\u2726', '\u2605', '\u26a1', '\ud83d\udd25', '\ud83d\udca5', '\ud83d\udcaf', '\ud83c\udfa8', '\u2728', '\u26d3\ufe0f', '\ud83d\udc51'];\r\n    const dripChars = ['|', ']', '}', ')', '\u02bb', '\u2040', '\u02ce'];\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; textArea.style.position = \"fixed\"; textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea); textArea.focus(); textArea.select();\r\n        try { document.execCommand('copy'); showToast(btnElement); } \r\n        catch(err) { if(navigator.clipboard) navigator.clipboard.writeText(text).then(()=>showToast(btnElement)); }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) { const o = btn.innerHTML; btn.innerHTML = '\u2713'; btn.style.background = 'var(--neon-green)'; \r\n            setTimeout(()=>{ btn.innerHTML = o; btn.style.background = ''; }, 1500); }\r\n        toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Street Legend', 'Neon Tag', 'Bomb Squad', 'Skyline Piece',\r\n            'Train Car', 'Corner King', 'Subway Ghost', 'Brick Wall',\r\n            'Alley Master', 'Roof Top', 'Underground', 'City Canvas',\r\n            'Concrete Flow', 'Spray Master', 'Night Writer', 'Block Burner',\r\n            'Wild Child', 'Urban Poet', 'Rooftop Elite', 'Street King'\r\n        ];\r\n        for(let i=0; i<120; i++){\r\n            templates.push({ id: `gr-${i}`, name: names[i % names.length] + ` [#${Math.floor(Math.random()*99)}]`, icon: ['fire', 'bolt', 'crown', 'ghost', 'train-subway', 'paint-roller', 'mask', 'eye'][i % 8] });\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 res = chars;\r\n        \r\n        let map = base;\r\n        if (mode === 'UrbanBubble') map = bold;\r\n        else if (mode === 'Wildstyle') map = script;\r\n        else if (mode === 'Stencil') map = full;\r\n        \r\n        if (mode !== 'StreetTag') {\r\n            res = res.map(c => { const idx = base.indexOf(c); return idx !== -1 ? map[idx] : c; });\r\n        }\r\n\r\n        if (style === 'Drips') {\r\n            res = res.map(c => (c !== ' ' && rand(4) > 1) ? c + dripChars[rand(dripChars.length)] : c);\r\n            res = res.map((c, i) => (i % 5 === 0 && rand(2) === 0) ? graffitiSymbols[rand(graffitiSymbols.length)] + c : c);\r\n        } \r\n        else if (style === 'NeonGlow') {\r\n            res = res.map((c, i) => (c !== ' ') ? c + (i % 2 === 0 ? '\u0337' : '\u0334') : c);\r\n            res = res.map(c => (rand(10) > 7) ? '*' + c + '*' : c);\r\n        }\r\n        else if (style === 'Wide') {\r\n            return Array.from(res.join('')).join(' ');\r\n        }\r\n        \r\n        if (mode === 'StreetTag') {\r\n            if (rand(2) === 0) res = ['\u00bb', '\u00bb'].concat(res).concat(['\u00ab', '\u00ab']);\r\n            else res = ['\u2605'].concat(res).concat(['\u2605']);\r\n        }\r\n\r\n        return res.join('');\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Grab the can...\";\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            const card = document.createElement('div');\r\n            card.className = 'gr-result-card';\r\n            card.innerHTML = `\r\n                <div class=\"gr-card-header\">\r\n                    <div class=\"gr-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<\/div>\r\n                    <button class=\"gr-card-copy-btn\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"gr-card-preview\">${out}<\/div>\r\n            `;\r\n            const copyBtn = card.querySelector('.gr-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => { e.preventDefault(); copyToClipboard(out, copyBtn); });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        loadMoreBtn.querySelector('span').innerText = `Bomb More Walls (${Math.max(0, ALL_STYLES.length - limit)})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    btnPaste.addEventListener('click', (e) => { e.preventDefault(); navigator.clipboard.readText().then(t=>{inputEl.value=t;render();}).catch(()=>inputEl.focus()); });\r\n    btnSelectAll.addEventListener('click', (e) => { e.preventDefault(); inputEl.select(); });\r\n    btnCopy.addEventListener('click', (e) => { e.preventDefault(); if(inputEl.value) copyToClipboard(inputEl.value, null); });\r\n    presetSelect.addEventListener('change', (e) => { if(e.target.value){inputEl.value=e.target.value;render();e.target.selectedIndex=0;} });\r\n    loadMoreBtn.addEventListener('click', (e) => { e.preventDefault(); limit += LOAD_INCREMENT; render(); });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault(); wrapper.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; 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(); wrapper.querySelectorAll('.style-btn').forEach(b=>b.classList.remove('active'));\r\n            btn.classList.add('active'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Graffiti Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <section class=\"pg-grtg-section pg-grtg-sec1\">\r\n        <div class=\"pg-grtg-wrap\">\r\n\t \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\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-grtg-section pg-grtg-sec1\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading\">What Makes This <span class=\"pg-grtg-kw\">Graffiti Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-grtg-sub\">Most text tools slap a basic bold font on your words and call it \"graffiti.\" Our graffiti text generator builds authentic street-style letters with spray paint textures, drip effects, and bold 3D shadows that look like they were tagged by a real artist.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,85,0.12);color:#ff0055;\"><i class=\"fa-solid fa-spray-can\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Authentic Street-Style Fonts<\/div>\r\n                    <p class=\"pg-grtg-desc\">Our graffiti text generator uses hand-crafted typefaces inspired by real subway art and alleyway tags \u2014 not generic bold fonts \u2014 giving your text that raw, underground urban authenticity.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(198,255,0,0.12);color:#8bc300;\"><i class=\"fa-solid fa-droplet\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Realistic Paint Drip Effects<\/div>\r\n                    <p class=\"pg-grtg-desc\">Add organic, randomized paint drips running down from your letters \u2014 our graffiti text generator calculates drip length, thickness, and opacity so it looks like wet spray paint sliding down a concrete wall.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(0,229,255,0.12);color:#00e5ff;\"><i class=\"fa-solid fa-cube\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Bold 3D Block Shadows<\/div>\r\n                    <p class=\"pg-grtg-desc\">Instantly add deep, layered 3D extrusions behind your text \u2014 our graffiti text generator creates multi-layered shadow blocks that give your tags that heavy, mural-style depth and impact.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Customizable Neon Colors<\/div>\r\n                    <p class=\"pg-grtg-desc\">Pick from vibrant neon pinks, electric blues, toxic greens, and spray paint yellows \u2014 our graffiti text generator lets you color each letter individually or apply gradient fills across your entire tag.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-image\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Export as High-Res Image<\/div>\r\n                    <p class=\"pg-grtg-desc\">Download your graffiti text as a transparent PNG in high resolution \u2014 our graffiti text generator renders crisp, print-ready graphics perfect for merch, posters, and digital designs without pixelation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Zero Design Skills Required<\/div>\r\n                    <p class=\"pg-grtg-desc\">No Photoshop, no Illustrator, no graphic design experience needed \u2014 our graffiti text generator handles all the complex layering, shading, and texturing automatically with a few simple clicks.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-grtg-section pg-grtg-sec2\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading pg-grtg-sec2-heading\">How to Use Our <span class=\"pg-grtg-kw pg-grtg-sec2-kw\">Graffiti Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-grtg-sub pg-grtg-sec2-sub\">Creating street-ready graffiti text takes seconds. No software downloads or design tutorials needed \u2014 just follow these steps and generate a professional-looking tag ready for anything.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 1: Type Your Tag or Word<\/div>\r\n                    <p class=\"pg-grtg-desc\">Enter your name, crew name, or any phrase into the input box \u2014 our graffiti text generator handles short tags and long phrases with equal visual impact and styling precision.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,85,0.12);color:#ff0055;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 2: Pick a Graffiti Style<\/div>\r\n                    <p class=\"pg-grtg-desc\">Choose from bubble throw-ups, wildstyle, block letters, or stencil cuts \u2014 our graffiti text generator applies the correct letter connections and proportions for each authentic street style.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(198,255,0,0.12);color:#8bc300;\"><i class=\"fa-solid fa-fill-drip\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 3: Choose Your Colors<\/div>\r\n                    <p class=\"pg-grtg-desc\">Select a solid fill, a neon gradient, or individually color each letter \u2014 our graffiti text generator offers street-authentic color palettes that mimic real spray paint cap widths and opacity.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(0,229,255,0.12);color:#00e5ff;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 4: Adjust Effects and Shadows<\/div>\r\n                    <p class=\"pg-grtg-desc\">Toggle drip effects, 3D shadow depth, outline thickness, and background textures \u2014 our graffiti text generator gives you granular control over every detail of your street art design.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-download\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 5: Download the Image<\/div>\r\n                    <p class=\"pg-grtg-desc\">Hit the download button to save your graffiti as a high-res transparent PNG \u2014 our graffiti text generator outputs clean files with no watermarks and no background clutter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-share-nodes\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 6: Use It Anywhere<\/div>\r\n                    <p class=\"pg-grtg-desc\">Drop your downloaded graffiti text into YouTube thumbnails, merch designs, social posts, or printed flyers \u2014 our graffiti text generator output is ready for both digital and print use immediately.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-grtg-section pg-grtg-sec3\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading\">Best Places to Use <span class=\"pg-grtg-kw\">Graffiti Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-grtg-sub\">Graffiti text instantly adds raw energy, urban edge, and street credibility to your visuals. Here are the highest-impact places where our graffiti text generator output transforms basic designs into head-turning graphics.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">YouTube Thumbnails and Intros<\/div>\r\n                    <p class=\"pg-grtg-desc\">Gaming, hip-hop, and street culture channels use our graffiti text generator for bold thumbnails that pop in search results \u2014 the 3D shadow effects grab attention faster than any standard font.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Instagram Reels and Stories<\/div>\r\n                    <p class=\"pg-grtg-desc\">Overlay graffiti text on Instagram Reels to match the platform's raw, unfiltered aesthetic \u2014 our graffiti text generator creates bold text layers that elevate basic video clips into viral-worthy content.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(145,70,255,0.12);color:#9146ff;\"><i class=\"fa-brands fa-twitch\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Twitch Stream Overlays<\/div>\r\n                    <p class=\"pg-grtg-desc\">Give your Twitch layout an urban edge with graffiti-style panel headers and alert text \u2014 our graffiti text generator creates the exact street-wear aesthetic that gaming audiences resonate with.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-shirt\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Streetwear and Merch Design<\/div>\r\n                    <p class=\"pg-grtg-desc\">Print our graffiti text generator output directly on t-shirts, hoodies, and stickers \u2014 the transparent PNG export integrates seamlessly into Print-on-Demand workflows with no background cleanup needed.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-music\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Mixtape Covers and SoundCloud Art<\/div>\r\n                    <p class=\"pg-grtg-desc\">Hip-hop artists and beatmakers use our graffiti text generator for mixtape titles and track covers \u2014 the dripping paint effects and bold lettering match the raw energy of the music perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-bullhorn\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Event Posters and Flyers<\/div>\r\n                    <p class=\"pg-grtg-desc\">Club nights, skate events, and underground parties need visuals that match the vibe \u2014 our graffiti text generator creates bold, readable headlines that look hand-painted on any digital flyer.<\/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            --grtg-neon: #ff0055;\r\n            --grtg-grad: linear-gradient(135deg, #ff0055, #c6ff00, #00e5ff);\r\n            --grtg-shadow: 0 12px 30px rgba(255, 0, 85, 0.16);\r\n            --grtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --grtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --grtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-grtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--grtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-grtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-grtg-heading {\r\n            font-family: var(--grtg-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-grtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-grtg-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(--grtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--grtg-ease);\r\n        }\r\n\r\n        .pg-grtg-section:hover .pg-grtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-sub {\r\n            font-family: var(--grtg-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-grtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-grtg-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(--grtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-grtg-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(--grtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--grtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(255,0,85,0.10) 0%, rgba(198,255,0,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-grtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-grtg-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(--grtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-grtg-card:hover .pg-grtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down .pg-grtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-grtg-title {\r\n            font-family: var(--grtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-grtg-desc {\r\n            font-family: var(--grtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-grtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec1 .pg-grtg-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-grtg-sec1 .pg-grtg-card:hover {\r\n            border-color: var(--grtg-neon);\r\n            box-shadow: var(--grtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-grtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-heading.pg-grtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-kw.pg-grtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-kw.pg-grtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff0055, #c6ff00, #ffffff);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-sub.pg-grtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-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-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #ff0055, #764ba2, #c6ff00);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(255,0,85,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card:hover {\r\n            border-color: rgba(255,0,85,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        \/* ==============================\r\n           SECTION 3 \u2014 concrete gray bg \/ white cards\r\n           ============================== *\/\r\n        .pg-grtg-sec3 {\r\n            background: #f5f3f0;\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #e2deda;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #ff0055, #c6ff00, #00e5ff);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card:hover {\r\n            border-color: var(--grtg-neon);\r\n            box-shadow: var(--grtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-grtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-grtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-grtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-grtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-grtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-grtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-grtg-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-grtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-grtg-glow', 'pg-grtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-grtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-grtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-grtg-glow', 'pg-grtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-grtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-grtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-grtg-down', 'pg-grtg-glow', 'pg-grtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-grtg-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-grtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-grtg-down', 'pg-grtg-glow', 'pg-grtg-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 Graffiti 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    .gr-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --heading-font: Impact, \"Arial Black\", sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* GRAFFITI NEON PALETTE *\/\r\n        --neon-pink: #ff007f;\r\n        --neon-green: #39ff14;\r\n        --neon-yellow: #ffe600;\r\n        --neon-blue: #00f0ff;\r\n        --neon-purple: #bf00ff;\r\n        --concrete: #1a1a1a;\r\n        --wall-bg: #111111;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #a0a0a0;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-graffiti: linear-gradient(90deg, #ff007f, #ffe600, #39ff14, #00f0ff, #bf00ff);\r\n        --grad-wall: linear-gradient(180deg, rgba(17,17,17,0.95) 0%, rgba(10,10,10,0.99) 100%);\r\n        --grad-spray: linear-gradient(135deg, rgba(255,0,127,0.2), rgba(57,255,20,0.2));\r\n        \r\n        --glow-pink: 0 0 15px rgba(255, 0, 127, 0.6);\r\n        --glow-green: 0 0 15px rgba(57, 255, 20, 0.5);\r\n        --glow-yellow: 0 0 15px rgba(255, 230, 0, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(12px);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .gr-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .gr-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .gr-hero-content-wrapper { z-index: 2; padding-top: 10px; width: 100%; }\r\n\r\n    .gr-main-title {\r\n        font-family: var(--heading-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        background: var(--grad-graffiti);\r\n        background-size: 200% 100%;\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n        color: transparent;\r\n        filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 10px rgba(255,0,127,0.5));\r\n        animation: gr-text-flow 4s linear infinite;\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        gap: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    @keyframes gr-text-flow {\r\n        0% { background-position: 0% 50%; }\r\n        100% { background-position: 200% 50%; }\r\n    }\r\n    \r\n    .gr-main-title i {\r\n        -webkit-text-fill-color: var(--neon-yellow);\r\n        text-shadow: var(--glow-yellow);\r\n        filter: none;\r\n        animation: gr-spray 2.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes gr-spray {\r\n        0%, 100% { transform: scale(1) rotate(0deg); }\r\n        25% { transform: scale(1.1) rotate(-10deg); }\r\n        75% { transform: scale(0.95) rotate(5deg); }\r\n    }\r\n\r\n    .gr-main-title:hover i { animation: none; transform: scale(1.3) rotate(-20deg); }\r\n    \r\n    .gr-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -12px; left: 50%; transform: translateX(-50%);\r\n        width: 80px; height: 4px;\r\n        background: var(--grad-graffiti);\r\n        background-size: 200% 100%;\r\n        animation: gr-text-flow 4s linear infinite;\r\n        box-shadow: var(--glow-pink);\r\n        border-radius: 3px;\r\n        transition: width 0.4s ease;\r\n    }\r\n    \r\n    .gr-main-title:hover::after { width: 60%; }\r\n\r\n    .gr-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(255,255,255,0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.7);\r\n    }\r\n\r\n    .gr-generator-card {\r\n        background: var(--wall-bg);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid rgba(255,255,255,0.1);\r\n        border-top: 5px solid var(--neon-pink);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 18px;\r\n        position: relative;\r\n        overflow: visible;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    \/* Concrete brick pattern overlay *\/\r\n    .gr-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\r\n        background-size: 40px 20px;\r\n        pointer-events: none;\r\n        z-index: 0;\r\n    }\r\n\r\n    .gr-controls-wrapper {\r\n        padding: 28px;\r\n        background: var(--grad-wall);\r\n        border-bottom: 1px solid rgba(255, 0, 127, 0.2);\r\n        display: grid;\r\n        grid-template-columns: 1.4fr 1fr;\r\n        gap: 22px;\r\n        align-items: stretch;\r\n        width: 100% !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .gr-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .gr-enhanced-input-wrapper {\r\n        background: rgba(0, 0, 0, 0.7);\r\n        border: 2px solid var(--neon-green);\r\n        border-radius: 14px;\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 15px rgba(0,0,0,0.8), 0 0 0 1px rgba(57, 255, 20, 0.3);\r\n        width: 100% !important;\r\n    }\r\n\r\n    .gr-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--neon-yellow);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 12px rgba(255, 230, 0, 0.4);\r\n    }\r\n    \r\n    .gr-text-input {\r\n        width: 100% !important;\r\n        min-height: 135px !important;\r\n        padding: 20px !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: 600 !important;\r\n        font-size: 1.5rem !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        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .gr-text-input::placeholder { color: rgba(57, 255, 20, 0.35); font-style: italic; }\r\n\r\n    .gr-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: 8px;\r\n        background: rgba(0, 0, 0, 0.8);\r\n        padding: 12px 16px;\r\n        border-top: 2px dashed rgba(255, 0, 127, 0.3);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .gr-toolbar-btn {\r\n        background: rgba(0, 0, 0, 0.5);\r\n        color: var(--text-muted);\r\n        border: 2px solid var(--neon-pink);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .gr-toolbar-btn:hover {\r\n        background: var(--neon-pink);\r\n        color: #fff;\r\n        transform: translateY(-2px) rotate(-2deg);\r\n        box-shadow: var(--glow-pink);\r\n    }\r\n    \r\n    .gr-preset-select {\r\n        background: rgba(0, 240, 255, 0.1);\r\n        color: var(--neon-blue);\r\n        border: 2px solid var(--neon-blue);\r\n        padding: 8px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        max-width: 200px;\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='%2300f0ff' 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 12px center;\r\n    }\r\n    \r\n    .gr-preset-select:hover, .gr-preset-select:focus {\r\n        background-color: var(--neon-blue);\r\n        color: #000;\r\n        box-shadow: var(--glow-yellow);\r\n    }\r\n    \r\n    .gr-preset-select option { background: #000; color: #fff; }\r\n\r\n    .gr-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 14px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .gr-settings-section > div {\r\n        background: rgba(0, 0, 0, 0.5);\r\n        border: 1px solid rgba(255, 230, 0, 0.2);\r\n        border-left: 4px solid var(--neon-purple);\r\n        border-radius: 10px;\r\n        padding: 14px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .gr-settings-section > div:hover { border-left-color: var(--neon-green); background: rgba(255, 255, 255, 0.05); }\r\n\r\n    .gr-panel-label {\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        color: var(--neon-yellow);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.2px;\r\n        margin-bottom: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n        text-shadow: 0 0 5px rgba(255, 230, 0, 0.4);\r\n    }\r\n    \r\n    .gr-panel-label i { font-size: 0.85rem; }\r\n\r\n    .gr-grid-options {\r\n        display: grid;\r\n        gap: 6px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .gr-option-btn {\r\n        background: rgba(255, 255, 255, 0.04);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 10px 4px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.65rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 4px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .gr-option-btn i { font-size: 1rem; transition: var(--transition-ui); }\r\n\r\n    .gr-option-btn:hover {\r\n        background: rgba(57, 255, 20, 0.15);\r\n        border-color: var(--neon-green);\r\n        color: #fff;\r\n        transform: scale(1.05) rotate(1deg);\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    \r\n    .gr-option-btn:hover i { transform: scale(1.2); color: var(--neon-green); }\r\n\r\n    .gr-option-btn.active {\r\n        background: linear-gradient(135deg, rgba(255, 0, 127, 0.2), rgba(191, 0, 255, 0.2));\r\n        color: var(--neon-yellow);\r\n        border-color: var(--neon-pink);\r\n        box-shadow: 0 0 10px rgba(255, 0, 127, 0.3);\r\n    }\r\n    \r\n    .gr-option-btn.active i { color: var(--neon-pink); }\r\n\r\n    \/* RESULTS AREA *\/\r\n    .gr-results-area { \r\n        padding: 30px 24px; \r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n        background: linear-gradient(180deg, var(--wall-bg) 0%, #000 100%);\r\n    }\r\n    \r\n    .gr-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 18px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* GRAFFITI CARD *\/\r\n    .gr-result-card {\r\n        background: rgba(15, 15, 15, 0.95);\r\n        border: 2px solid rgba(255, 255, 255, 0.1);\r\n        border-top: 3px solid var(--neon-blue);\r\n        border-left: 4px solid var(--neon-purple);\r\n        border-radius: 12px;\r\n        padding: 18px 22px;\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        min-height: 125px; \r\n        box-sizing: border-box;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    \/* Hover Highlight Sweep *\/\r\n    .gr-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));\r\n        transition: width 0.3s ease;\r\n        opacity: 0.8;\r\n        z-index: 1;\r\n    }\r\n    \r\n    .gr-result-card:hover {\r\n        transform: translateY(-5px) scale(1.01) rotate(0.5deg);\r\n        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(57, 255, 20, 0.25);\r\n        border-color: var(--neon-green);\r\n        background: rgba(20, 20, 20, 0.98);\r\n    }\r\n    \r\n    .gr-result-card:hover::after { width: 5px; }\r\n\r\n    .gr-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 8px;\r\n        padding-bottom: 6px;\r\n        border-bottom: 1px dashed rgba(255, 230, 0, 0.2);\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .gr-card-title {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--neon-yellow);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: var(--transition-fast);\r\n        text-shadow: 0 0 5px rgba(255, 230, 0, 0.3);\r\n    }\r\n    \r\n    .gr-card-title i { color: var(--neon-pink); font-size: 0.9rem; transition: transform 0.3s ease; }\r\n    .gr-result-card:hover .gr-card-title { color: #fff; letter-spacing: 1px; }\r\n    .gr-result-card:hover .gr-card-title i { transform: rotate(-20deg) scale(1.3); color: var(--neon-green); text-shadow: var(--glow-green); }\r\n\r\n    .gr-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: #fff;\r\n        width: 32px; height: 32px;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .gr-card-copy-btn:hover {\r\n        background: var(--neon-green);\r\n        color: #000;\r\n        border-color: var(--neon-green);\r\n        transform: scale(1.2) rotate(10deg);\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    \r\n    .gr-card-preview {\r\n        font-size: 1.4rem;\r\n        color: var(--neon-green);\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        flex-grow: 1;\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        line-height: 1.5;\r\n        max-height: 140px;\r\n        overflow-y: auto;\r\n        text-shadow: 0 2px 3px rgba(0,0,0,0.8);\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .gr-result-card:hover .gr-card-preview { color: #fff; text-shadow: 0 0 10px rgba(255, 0, 127, 0.5); }\r\n\r\n    .gr-btn-load {\r\n        background: #000;\r\n        color: var(--neon-yellow);\r\n        border: 2px solid var(--neon-pink);\r\n        padding: 14px 35px;\r\n        font-family: var(--heading-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 25px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-ui);\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 5px 15px rgba(0,0,0,0.5);\r\n        animation: gr-pulse-ring 3s infinite;\r\n        position: relative;\r\n        z-index: 2;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    @keyframes gr-pulse-ring {\r\n        0% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.5), 0 5px 15px rgba(0,0,0,0.5); }\r\n        70% { box-shadow: 0 0 0 14px rgba(255, 0, 127, 0), 0 5px 15px rgba(0,0,0,0.5); }\r\n        100% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0), 0 5px 15px rgba(0,0,0,0.5); }\r\n    }\r\n    \r\n    .gr-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 0, 127, 0.3), transparent);\r\n        transition: left 0.5s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .gr-btn-load:hover { \r\n        background: var(--neon-pink);\r\n        color: #fff;\r\n        border-color: var(--neon-pink);\r\n        transform: translateY(-3px) scale(1.02);\r\n        box-shadow: var(--glow-pink);\r\n    }\r\n    \r\n    .gr-btn-load:hover::before { left: 100%; }\r\n    .gr-btn-load:hover i { transform: translateY(5px); color: #fff; }\r\n    .gr-btn-load:active { transform: translateY(0) scale(0.98); }\r\n\r\n    .gr-toast {\r\n        visibility: hidden;\r\n        background: #000;\r\n        color: #fff;\r\n        padding: 12px 24px;\r\n        position: fixed;\r\n        left: 50%; bottom: 30px;\r\n        transform: translateX(-50%) translateY(10px);\r\n        font-family: var(--heading-font);\r\n        font-weight: 900;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 2px solid var(--neon-green);\r\n        opacity: 0;\r\n        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: var(--glow-green);\r\n    }\r\n    .gr-toast i { color: var(--neon-yellow); }\r\n    .gr-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 900px) {\r\n        .gr-controls-wrapper { grid-template-columns: 1fr; }\r\n        .gr-settings-section { flex-direction: row; }\r\n        .gr-main-title { font-size: 2.6rem; }\r\n    }\r\n\r\n    @media (max-width: 700px) {\r\n        .gr-settings-section { flex-direction: column; }\r\n        .gr-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n        .gr-result-list { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .gr-container { padding: 25px 12px !important; }\r\n        .gr-results-area { padding: 20px 12px; }\r\n        .gr-controls-wrapper { padding: 16px; }\r\n        .gr-text-input { min-height: 100px !important; font-size: 1.2rem !important; }\r\n        .gr-input-toolbar { flex-direction: column; }\r\n        .gr-preset-select { max-width: 100%; }\r\n        .gr-btn-load { padding: 14px 25px; font-size: 0.85rem; width: 100%; }\r\n        .gr-main-title { font-size: 1.9rem; }\r\n        .gr-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"gr-tool-wrapper\" id=\"gr-graffiti-tool\">\r\n    <div class=\"gr-container gr-hero-content-wrapper\">\r\n        <h1 class=\"gr-main-title\"><i class=\"fa-solid fa-spray-can-sparkles\"><\/i> Graffiti Text Generator - Design Instantly<\/h1>\r\n        <p class=\"gr-subtitle\">Tag the digital walls. Transform text into street-style tags, bold urban bubble letters, and wildstyle graffiti that pops with vibrant neon spray-paint energy.<\/p>\r\n        \r\n        <div class=\"gr-generator-card\">\r\n            <div class=\"gr-controls-wrapper\">\r\n                \r\n                <div class=\"gr-input-section\">\r\n                    <div class=\"gr-enhanced-input-wrapper\">\r\n                        <textarea class=\"gr-text-input\" id=\"grInputText\" placeholder=\"Grab the can...\"><\/textarea>\r\n                        <div class=\"gr-input-toolbar\">\r\n                            <div style=\"display:flex; gap:8px; flex-wrap:wrap;\">\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                                <button class=\"gr-toolbar-btn\" id=\"grBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            <select class=\"gr-preset-select\" id=\"grPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83c\udfa8 Street Presets<\/option>\r\n                                <option value=\">>> TAG THE WALL <<<\">Tag The Wall<\/option>\r\n                                <option value=\"\u2605 URBAN KINGS \u2605\">Urban Kings<\/option>\r\n                                <option value=\"[ NO MERCY ]\">No Mercy<\/option>\r\n                                <option value=\"WILDSTYLE BOMBING\">Wildstyle<\/option>\r\n                                <option value=\"NEON NIGHTS 24\/7\">Neon Nights<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"gr-settings-section\">\r\n                    <div>\r\n                        <div class=\"gr-panel-label\"><i class=\"fa-solid fa-spray-can\"><\/i> Tag Style<\/div>\r\n                        <div class=\"gr-grid-options\">\r\n                            <button class=\"gr-option-btn mode-btn active\" data-val=\"StreetTag\">\r\n                                <i class=\"fa-solid fa-signature\"><\/i><span>Street Tag<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"UrbanBubble\">\r\n                                <i class=\"fa-solid fa-circle\"><\/i><span>Urban Bubble<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"Wildstyle\">\r\n                                <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><span>Wildstyle<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn mode-btn\" data-val=\"Stencil\">\r\n                                <i class=\"fa-solid fa-stamp\"><\/i><span>Stencil<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"gr-panel-label\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i> Spray FX<\/div>\r\n                        <div class=\"gr-grid-options\">\r\n                            <button class=\"gr-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i><span>Clean<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"Drips\">\r\n                                <i class=\"fa-solid fa-droplet\"><\/i><span>Drips<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"NeonGlow\">\r\n                                <i class=\"fa-solid fa-bolt\"><\/i><span>Neon Glow<\/span>\r\n                            <\/button>\r\n                            <button class=\"gr-option-btn style-btn\" data-val=\"Wide\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i><span>Wide<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"gr-results-area\">\r\n                <div class=\"gr-result-list\" id=\"grResultList\"><\/div>\r\n                <button class=\"gr-btn-load\" id=\"grLoadMoreBtn\"><span>Bomb More Walls<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"grToast\" class=\"gr-toast\"><i class=\"fa-solid fa-spray-can\"><\/i> Tag Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('gr-graffiti-tool');\r\n    const inputEl = wrapper.querySelector('#grInputText');\r\n    const resultList = wrapper.querySelector('#grResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#grLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#grToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#grBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#grBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#grBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#grPresetSelect');\r\n\r\n    let currentMode = 'StreetTag';\r\n    let currentStyle = 'Clean';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const bold = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const script = \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\ud835\udc9c\u212c\ud835\udc9e\ud835\udc9f\u2130\u2131\ud835\udca2\u210b\u2110\ud835\udca5\ud835\udca6\u2112\u2133\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\u211b\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb5\";\r\n    const gothic = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\";\r\n    const full = \"\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\";\r\n\r\n    const graffitiSymbols = ['\u2726', '\u2605', '\u26a1', '\ud83d\udd25', '\ud83d\udca5', '\ud83d\udcaf', '\ud83c\udfa8', '\u2728', '\u26d3\ufe0f', '\ud83d\udc51'];\r\n    const dripChars = ['|', ']', '}', ')', '\u02bb', '\u2040', '\u02ce'];\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; textArea.style.position = \"fixed\"; textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea); textArea.focus(); textArea.select();\r\n        try { document.execCommand('copy'); showToast(btnElement); } \r\n        catch(err) { if(navigator.clipboard) navigator.clipboard.writeText(text).then(()=>showToast(btnElement)); }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) { const o = btn.innerHTML; btn.innerHTML = '\u2713'; btn.style.background = 'var(--neon-green)'; \r\n            setTimeout(()=>{ btn.innerHTML = o; btn.style.background = ''; }, 1500); }\r\n        toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Street Legend', 'Neon Tag', 'Bomb Squad', 'Skyline Piece',\r\n            'Train Car', 'Corner King', 'Subway Ghost', 'Brick Wall',\r\n            'Alley Master', 'Roof Top', 'Underground', 'City Canvas',\r\n            'Concrete Flow', 'Spray Master', 'Night Writer', 'Block Burner',\r\n            'Wild Child', 'Urban Poet', 'Rooftop Elite', 'Street King'\r\n        ];\r\n        for(let i=0; i<120; i++){\r\n            templates.push({ id: `gr-${i}`, name: names[i % names.length] + ` [#${Math.floor(Math.random()*99)}]`, icon: ['fire', 'bolt', 'crown', 'ghost', 'train-subway', 'paint-roller', 'mask', 'eye'][i % 8] });\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 res = chars;\r\n        \r\n        let map = base;\r\n        if (mode === 'UrbanBubble') map = bold;\r\n        else if (mode === 'Wildstyle') map = script;\r\n        else if (mode === 'Stencil') map = full;\r\n        \r\n        if (mode !== 'StreetTag') {\r\n            res = res.map(c => { const idx = base.indexOf(c); return idx !== -1 ? map[idx] : c; });\r\n        }\r\n\r\n        if (style === 'Drips') {\r\n            res = res.map(c => (c !== ' ' && rand(4) > 1) ? c + dripChars[rand(dripChars.length)] : c);\r\n            res = res.map((c, i) => (i % 5 === 0 && rand(2) === 0) ? graffitiSymbols[rand(graffitiSymbols.length)] + c : c);\r\n        } \r\n        else if (style === 'NeonGlow') {\r\n            res = res.map((c, i) => (c !== ' ') ? c + (i % 2 === 0 ? '\u0337' : '\u0334') : c);\r\n            res = res.map(c => (rand(10) > 7) ? '*' + c + '*' : c);\r\n        }\r\n        else if (style === 'Wide') {\r\n            return Array.from(res.join('')).join(' ');\r\n        }\r\n        \r\n        if (mode === 'StreetTag') {\r\n            if (rand(2) === 0) res = ['\u00bb', '\u00bb'].concat(res).concat(['\u00ab', '\u00ab']);\r\n            else res = ['\u2605'].concat(res).concat(['\u2605']);\r\n        }\r\n\r\n        return res.join('');\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Grab the can...\";\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            const card = document.createElement('div');\r\n            card.className = 'gr-result-card';\r\n            card.innerHTML = `\r\n                <div class=\"gr-card-header\">\r\n                    <div class=\"gr-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<\/div>\r\n                    <button class=\"gr-card-copy-btn\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"gr-card-preview\">${out}<\/div>\r\n            `;\r\n            const copyBtn = card.querySelector('.gr-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => { e.preventDefault(); copyToClipboard(out, copyBtn); });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        loadMoreBtn.querySelector('span').innerText = `Bomb More Walls (${Math.max(0, ALL_STYLES.length - limit)})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    btnPaste.addEventListener('click', (e) => { e.preventDefault(); navigator.clipboard.readText().then(t=>{inputEl.value=t;render();}).catch(()=>inputEl.focus()); });\r\n    btnSelectAll.addEventListener('click', (e) => { e.preventDefault(); inputEl.select(); });\r\n    btnCopy.addEventListener('click', (e) => { e.preventDefault(); if(inputEl.value) copyToClipboard(inputEl.value, null); });\r\n    presetSelect.addEventListener('change', (e) => { if(e.target.value){inputEl.value=e.target.value;render();e.target.selectedIndex=0;} });\r\n    loadMoreBtn.addEventListener('click', (e) => { e.preventDefault(); limit += LOAD_INCREMENT; render(); });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault(); wrapper.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; 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(); wrapper.querySelectorAll('.style-btn').forEach(b=>b.classList.remove('active'));\r\n            btn.classList.add('active'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Graffiti Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <section class=\"pg-grtg-section pg-grtg-sec1\">\r\n        <div class=\"pg-grtg-wrap\">\r\n\t \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\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-grtg-section pg-grtg-sec1\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading\">What Makes This <span class=\"pg-grtg-kw\">Graffiti Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-grtg-sub\">Most text tools slap a basic bold font on your words and call it \"graffiti.\" Our graffiti text generator builds authentic street-style letters with spray paint textures, drip effects, and bold 3D shadows that look like they were tagged by a real artist.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,85,0.12);color:#ff0055;\"><i class=\"fa-solid fa-spray-can\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Authentic Street-Style Fonts<\/div>\r\n                    <p class=\"pg-grtg-desc\">Our graffiti text generator uses hand-crafted typefaces inspired by real subway art and alleyway tags \u2014 not generic bold fonts \u2014 giving your text that raw, underground urban authenticity.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(198,255,0,0.12);color:#8bc300;\"><i class=\"fa-solid fa-droplet\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Realistic Paint Drip Effects<\/div>\r\n                    <p class=\"pg-grtg-desc\">Add organic, randomized paint drips running down from your letters \u2014 our graffiti text generator calculates drip length, thickness, and opacity so it looks like wet spray paint sliding down a concrete wall.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(0,229,255,0.12);color:#00e5ff;\"><i class=\"fa-solid fa-cube\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Bold 3D Block Shadows<\/div>\r\n                    <p class=\"pg-grtg-desc\">Instantly add deep, layered 3D extrusions behind your text \u2014 our graffiti text generator creates multi-layered shadow blocks that give your tags that heavy, mural-style depth and impact.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Customizable Neon Colors<\/div>\r\n                    <p class=\"pg-grtg-desc\">Pick from vibrant neon pinks, electric blues, toxic greens, and spray paint yellows \u2014 our graffiti text generator lets you color each letter individually or apply gradient fills across your entire tag.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-image\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Export as High-Res Image<\/div>\r\n                    <p class=\"pg-grtg-desc\">Download your graffiti text as a transparent PNG in high resolution \u2014 our graffiti text generator renders crisp, print-ready graphics perfect for merch, posters, and digital designs without pixelation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Zero Design Skills Required<\/div>\r\n                    <p class=\"pg-grtg-desc\">No Photoshop, no Illustrator, no graphic design experience needed \u2014 our graffiti text generator handles all the complex layering, shading, and texturing automatically with a few simple clicks.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-grtg-section pg-grtg-sec2\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading pg-grtg-sec2-heading\">How to Use Our <span class=\"pg-grtg-kw pg-grtg-sec2-kw\">Graffiti Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-grtg-sub pg-grtg-sec2-sub\">Creating street-ready graffiti text takes seconds. No software downloads or design tutorials needed \u2014 just follow these steps and generate a professional-looking tag ready for anything.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 1: Type Your Tag or Word<\/div>\r\n                    <p class=\"pg-grtg-desc\">Enter your name, crew name, or any phrase into the input box \u2014 our graffiti text generator handles short tags and long phrases with equal visual impact and styling precision.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,85,0.12);color:#ff0055;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 2: Pick a Graffiti Style<\/div>\r\n                    <p class=\"pg-grtg-desc\">Choose from bubble throw-ups, wildstyle, block letters, or stencil cuts \u2014 our graffiti text generator applies the correct letter connections and proportions for each authentic street style.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(198,255,0,0.12);color:#8bc300;\"><i class=\"fa-solid fa-fill-drip\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 3: Choose Your Colors<\/div>\r\n                    <p class=\"pg-grtg-desc\">Select a solid fill, a neon gradient, or individually color each letter \u2014 our graffiti text generator offers street-authentic color palettes that mimic real spray paint cap widths and opacity.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(0,229,255,0.12);color:#00e5ff;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 4: Adjust Effects and Shadows<\/div>\r\n                    <p class=\"pg-grtg-desc\">Toggle drip effects, 3D shadow depth, outline thickness, and background textures \u2014 our graffiti text generator gives you granular control over every detail of your street art design.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-download\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 5: Download the Image<\/div>\r\n                    <p class=\"pg-grtg-desc\">Hit the download button to save your graffiti as a high-res transparent PNG \u2014 our graffiti text generator outputs clean files with no watermarks and no background clutter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec2-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-share-nodes\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Step 6: Use It Anywhere<\/div>\r\n                    <p class=\"pg-grtg-desc\">Drop your downloaded graffiti text into YouTube thumbnails, merch designs, social posts, or printed flyers \u2014 our graffiti text generator output is ready for both digital and print use immediately.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-grtg-section pg-grtg-sec3\">\r\n        <div class=\"pg-grtg-wrap\">\r\n            <h2 class=\"pg-grtg-heading\">Best Places to Use <span class=\"pg-grtg-kw\">Graffiti Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-grtg-sub\">Graffiti text instantly adds raw energy, urban edge, and street credibility to your visuals. Here are the highest-impact places where our graffiti text generator output transforms basic designs into head-turning graphics.<\/p>\r\n            <div class=\"pg-grtg-grid\">\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">YouTube Thumbnails and Intros<\/div>\r\n                    <p class=\"pg-grtg-desc\">Gaming, hip-hop, and street culture channels use our graffiti text generator for bold thumbnails that pop in search results \u2014 the 3D shadow effects grab attention faster than any standard font.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Instagram Reels and Stories<\/div>\r\n                    <p class=\"pg-grtg-desc\">Overlay graffiti text on Instagram Reels to match the platform's raw, unfiltered aesthetic \u2014 our graffiti text generator creates bold text layers that elevate basic video clips into viral-worthy content.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(145,70,255,0.12);color:#9146ff;\"><i class=\"fa-brands fa-twitch\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Twitch Stream Overlays<\/div>\r\n                    <p class=\"pg-grtg-desc\">Give your Twitch layout an urban edge with graffiti-style panel headers and alert text \u2014 our graffiti text generator creates the exact street-wear aesthetic that gaming audiences resonate with.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-shirt\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Streetwear and Merch Design<\/div>\r\n                    <p class=\"pg-grtg-desc\">Print our graffiti text generator output directly on t-shirts, hoodies, and stickers \u2014 the transparent PNG export integrates seamlessly into Print-on-Demand workflows with no background cleanup needed.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-music\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Mixtape Covers and SoundCloud Art<\/div>\r\n                    <p class=\"pg-grtg-desc\">Hip-hop artists and beatmakers use our graffiti text generator for mixtape titles and track covers \u2014 the dripping paint effects and bold lettering match the raw energy of the music perfectly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-grtg-card pg-grtg-sec3-card\">\r\n                    <div class=\"pg-grtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-bullhorn\"><\/i><\/div>\r\n                    <div class=\"pg-grtg-title\">Event Posters and Flyers<\/div>\r\n                    <p class=\"pg-grtg-desc\">Club nights, skate events, and underground parties need visuals that match the vibe \u2014 our graffiti text generator creates bold, readable headlines that look hand-painted on any digital flyer.<\/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            --grtg-neon: #ff0055;\r\n            --grtg-grad: linear-gradient(135deg, #ff0055, #c6ff00, #00e5ff);\r\n            --grtg-shadow: 0 12px 30px rgba(255, 0, 85, 0.16);\r\n            --grtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --grtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --grtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-grtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--grtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-grtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-grtg-heading {\r\n            font-family: var(--grtg-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-grtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-grtg-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(--grtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--grtg-ease);\r\n        }\r\n\r\n        .pg-grtg-section:hover .pg-grtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-sub {\r\n            font-family: var(--grtg-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-grtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-grtg-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(--grtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-grtg-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(--grtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--grtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(255,0,85,0.10) 0%, rgba(198,255,0,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-grtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-grtg-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(--grtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-grtg-card:hover .pg-grtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-grtg-card.pg-grtg-down .pg-grtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-grtg-title {\r\n            font-family: var(--grtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-grtg-desc {\r\n            font-family: var(--grtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-grtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec1 .pg-grtg-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-grtg-sec1 .pg-grtg-card:hover {\r\n            border-color: var(--grtg-neon);\r\n            box-shadow: var(--grtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-grtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-heading.pg-grtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-kw.pg-grtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-kw.pg-grtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff0055, #c6ff00, #ffffff);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-sub.pg-grtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-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-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #ff0055, #764ba2, #c6ff00);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(255,0,85,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-grtg-sec2 .pg-grtg-card.pg-grtg-sec2-card:hover {\r\n            border-color: rgba(255,0,85,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        \/* ==============================\r\n           SECTION 3 \u2014 concrete gray bg \/ white cards\r\n           ============================== *\/\r\n        .pg-grtg-sec3 {\r\n            background: #f5f3f0;\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #e2deda;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #ff0055, #c6ff00, #00e5ff);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-grtg-sec3 .pg-grtg-card.pg-grtg-sec3-card:hover {\r\n            border-color: var(--grtg-neon);\r\n            box-shadow: var(--grtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-grtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-grtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-grtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-grtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-grtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-grtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-grtg-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-grtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-grtg-glow', 'pg-grtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-grtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-grtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-grtg-glow', 'pg-grtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-grtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-grtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-grtg-down', 'pg-grtg-glow', 'pg-grtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-grtg-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-grtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-grtg-down', 'pg-grtg-glow', 'pg-grtg-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-555","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>G\u00e9n\u00e9rateur de texte graffiti \u2013 Cr\u00e9ez instantan\u00e9ment<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ez des textes graffiti percutants avec notre g\u00e9n\u00e9rateur de texte graffiti gratuit. Transformez n&#039;importe quel texte en lettres d&#039;art urbain\u00a0: copiez et collez en quelques secondes.\" \/>\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\/fr\/graffiti-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Graffiti Text Generator \u2013 Design Instantly\" \/>\n<meta property=\"og:description\" content=\"Create bold graffiti text with our free Graffiti Text Generator. Transform any text into street-style art letters \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T09:00:43+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\\\/graffiti-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/graffiti-text-generator\\\/\",\"name\":\"Graffiti Text Generator \u2013 Design Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-10T00:00:02+00:00\",\"dateModified\":\"2026-04-06T09:00:43+00:00\",\"description\":\"Create bold graffiti text with our free Graffiti Text Generator. Transform any text into street-style art letters \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/graffiti-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/graffiti-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/graffiti-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graffiti Text Generator \u2013 Design 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":"G\u00e9n\u00e9rateur de texte graffiti \u2013 Cr\u00e9ez instantan\u00e9ment","description":"Cr\u00e9ez des textes graffiti percutants avec notre g\u00e9n\u00e9rateur de texte graffiti gratuit. Transformez n&#39;importe quel texte en lettres d&#39;art urbain\u00a0: copiez et collez en quelques secondes.","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\/fr\/graffiti-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Graffiti Text Generator \u2013 Design Instantly","og_description":"Create bold graffiti text with our free Graffiti Text Generator. Transform any text into street-style art letters \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T09:00:43+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/","url":"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/","name":"Graffiti Text Generator \u2013 Design Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-10T00:00:02+00:00","dateModified":"2026-04-06T09:00:43+00:00","description":"Create bold graffiti text with our free Graffiti Text Generator. Transform any text into street-style art letters \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/graffiti-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/graffiti-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Graffiti Text Generator \u2013 Design 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\/fr\/wp-json\/wp\/v2\/pages\/555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/comments?post=555"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/555\/revisions"}],"predecessor-version":[{"id":558,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/555\/revisions\/558"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/media?parent=555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}