{"id":286,"date":"2026-02-25T02:58:00","date_gmt":"2026-02-25T02:58:00","guid":{"rendered":"https:\/\/oualator.com\/calculate\/?p=286"},"modified":"2026-02-26T12:41:18","modified_gmt":"2026-02-26T12:41:18","slug":"brat-text-generator","status":"publish","type":"post","link":"https:\/\/oualator.com\/calculate\/brat-text-generator\/","title":{"rendered":"Create Custom Text Designs with Brat Text Generator"},"content":{"rendered":"\n<p>The Brat Text Generator is a powerful tool designed to help you recreate the iconic, minimalist aesthetic of Charli XCX&#8217;s &#8216;brat&#8217; era. From color changes to sizing, and bold, italic, or underline styles, this generator allows you to mix and match text designs in a couple of quick steps. Start to make your text more eye-catching with the our customized styles today! You can also check out the <a href=\"https:\/\/oualator.com\/calculate\/ambigram-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"text-blue-600 font-medium hover:text-blue-700\">Ambigram Generator<\/a> for a similar manipulations with text.<\/p>\n\n\n\n<div style=\"font-family:sans-serif;padding:10px;border-radius:8px;background:#fefefe;box-shadow:0 2px 8px rgba(0,0,0,0.1);display:flex;align-items:center;gap:10px;\"><span style=\"color:#f39c12;\">\u26a0\ufe0f<\/span><span>The live preview may not work at times,<\/span><span style=\"color:#27ae60;\">\u2705 But, you will get the Desired Output as you want.<\/span><\/div>\n\n\n\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        * {\n            font-family: 'Inter', sans-serif;\n        }\n        \n        .brat-gradient {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        }\n        \n        .text-preview {\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            word-wrap: break-word;\n            overflow-wrap: break-word;\n            hyphens: auto;\n        }\n        \n        .control-panel {\n            backdrop-filter: blur(10px);\n            background: rgba(255, 255, 255, 0.95);\n            border: 1px solid rgba(255, 255, 255, 0.2);\n        }\n        \n        .slider {\n            appearance: none;\n            height: 8px;\n            border-radius: 5px;\n            background: #ddd;\n            outline: none;\n            transition: background 0.3s;\n        }\n        \n        .slider::-webkit-slider-thumb {\n            appearance: none;\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: #667eea;\n            cursor: pointer;\n            transition: all 0.3s;\n        }\n        \n        .slider::-webkit-slider-thumb:hover {\n            background: #764ba2;\n            transform: scale(1.1);\n        }\n        \n        .slider::-moz-range-thumb {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: #667eea;\n            cursor: pointer;\n            border: none;\n            transition: all 0.3s;\n        }\n        \n        .checkbox-custom {\n            position: relative;\n            display: inline-block;\n            width: 50px;\n            height: 24px;\n        }\n        \n        .checkbox-custom input {\n            opacity: 0;\n            width: 0;\n            height: 0;\n        }\n        \n        .slider-toggle {\n            position: absolute;\n            cursor: pointer;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-color: #ccc;\n            transition: .4s;\n            border-radius: 24px;\n        }\n        \n        .slider-toggle:before {\n            position: absolute;\n            content: \"\";\n            height: 18px;\n            width: 18px;\n            left: 3px;\n            bottom: 3px;\n            background-color: white;\n            transition: .4s;\n            border-radius: 50%;\n        }\n        \n        input:checked + .slider-toggle {\n            background-color: #667eea;\n        }\n        \n        input:checked + .slider-toggle:before {\n            transform: translateX(26px);\n        }\n        \n        .color-input {\n            width: 60px;\n            height: 40px;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: transform 0.2s;\n        }\n        \n        .color-input:hover {\n            transform: scale(1.05);\n        }\n        \n        .export-options {\n            display: none;\n            animation: slideDown 0.3s ease-out;\n        }\n        \n        .export-options.show {\n            display: block;\n        }\n        \n        @keyframes slideDown {\n            from {\n                opacity: 0;\n                transform: translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        .btn-primary {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            transition: all 0.3s;\n        }\n        \n        .btn-primary:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);\n        }\n        \n        .btn-secondary {\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            transition: all 0.3s;\n        }\n        \n        .btn-secondary:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 10px 20px rgba(240, 147, 251, 0.3);\n        }\n        \n        .preset-button {\n            transition: all 0.2s;\n            border: 2px solid transparent;\n        }\n        \n        .preset-button:hover {\n            border-color: #667eea;\n            transform: scale(1.05);\n        }\n        \n        @media (max-width: 768px) {\n            .control-panel {\n                margin: 1rem;\n            }\n            \n            .text-preview {\n                min-height: 200px;\n            }\n        }\n    <\/style>\n    <div class=\"container mx-auto px-4 py-8\">\n        <!-- Header -->\n        <div class=\"text-center mb-8\">\n            <h2 class=\"text-4xl md:text-6xl font-black text-black mb-4\">\n                <i class=\"fas fa-magic mr-3\"><\/i>BRAT TEXT GENERATOR\n            <\/h2>\n            <p class=\"text-lg text-black opacity-90\">Create stunning, customizable text with live preview<\/p>\n        <\/div>\n\n        <div class=\"grid lg:grid-cols-2 gap-8\">\n            <!-- Control Panel -->\n            <div class=\"control-panel rounded-2xl p-6 shadow-2xl\">\n                <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">\n                    <i class=\"fas fa-cogs mr-2\"><\/i>Customize Your Text\n                <\/h2>\n\n                <!-- Text Input -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-2\">\n                        <i class=\"fas fa-edit mr-2\"><\/i>Your Text\n                    <\/label>\n                    <textarea \n                        id=\"textInput\" \n                        placeholder=\"Enter your brat text here...\" \n                        class=\"w-full p-4 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors resize-none\"\n                        rows=\"3\"\n                    >BRAT SUMMER<\/textarea>\n                <\/div>\n\n                <!-- Color Controls -->\n                <div class=\"grid md:grid-cols-2 gap-4 mb-6\">\n                    <div>\n                        <label class=\"block text-sm font-semibold text-gray-700 mb-2\">\n                            <i class=\"fas fa-palette mr-2\"><\/i>Text Color\n                        <\/label>\n                        <div class=\"flex items-center space-x-3\">\n                            <input type=\"color\" id=\"textColor\" value=\"#ffffff\" class=\"color-input shadow-lg\">\n                            <span id=\"textColorValue\" class=\"text-sm font-mono\">#ffffff<\/span>\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label class=\"block text-sm font-semibold text-gray-700 mb-2\">\n                            <i class=\"fas fa-fill-drip mr-2\"><\/i>Background Color\n                        <\/label>\n                        <div class=\"flex items-center space-x-3\">\n                            <input type=\"color\" id=\"bgColor\" value=\"#1a1a1a\" class=\"color-input shadow-lg\">\n                            <span id=\"bgColorValue\" class=\"text-sm font-mono\">#1a1a1a<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Text Size -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-2\">\n                        <i class=\"fas fa-text-height mr-2\"><\/i>Text Size: <span id=\"sizeValue\">48px<\/span>\n                    <\/label>\n                    <input \n                        type=\"range\" \n                        id=\"textSize\" \n                        min=\"12\" \n                        max=\"120\" \n                        value=\"48\" \n                        class=\"slider w-full\"\n                    >\n                    <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n                        <span>12px<\/span>\n                        <span>120px<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Style Options -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-3\">\n                        <i class=\"fas fa-bold mr-2\"><\/i>Text Styles\n                    <\/label>\n                    <div class=\"grid grid-cols-3 gap-4\">\n                        <div class=\"flex items-center justify-between\">\n                            <span class=\"text-sm\">Bold<\/span>\n                            <label class=\"checkbox-custom\">\n                                <input type=\"checkbox\" id=\"boldCheck\">\n                                <span class=\"slider-toggle\"><\/span>\n                            <\/label>\n                        <\/div>\n                        <div class=\"flex items-center justify-between\">\n                            <span class=\"text-sm\">Italic<\/span>\n                            <label class=\"checkbox-custom\">\n                                <input type=\"checkbox\" id=\"italicCheck\">\n                                <span class=\"slider-toggle\"><\/span>\n                            <\/label>\n                        <\/div>\n                        <div class=\"flex items-center justify-between\">\n                            <span class=\"text-sm\">Underline<\/span>\n                            <label class=\"checkbox-custom\">\n                                <input type=\"checkbox\" id=\"underlineCheck\">\n                                <span class=\"slider-toggle\"><\/span>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Font Family -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-2\">\n                        <i class=\"fas fa-font mr-2\"><\/i>Font Family\n                    <\/label>\n                    <select id=\"fontFamily\" class=\"w-full p-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none transition-colors\">\n                        <option value=\"Inter\">Inter<\/option>\n                        <option value=\"Arial\">Arial<\/option>\n                        <option value=\"Helvetica\">Helvetica<\/option>\n                        <option value=\"Georgia\">Georgia<\/option>\n                        <option value=\"Times New Roman\">Times New Roman<\/option>\n                        <option value=\"Courier New\">Courier New<\/option>\n                        <option value=\"Verdana\">Verdana<\/option>\n                        <option value=\"Impact\">Impact<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Text Effects -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-3\">\n                        <i class=\"fas fa-magic mr-2\"><\/i>Text Effects\n                    <\/label>\n                    <div class=\"grid grid-cols-2 gap-4\">\n                        <div class=\"flex items-center justify-between\">\n                            <span class=\"text-sm\">Text Shadow<\/span>\n                            <label class=\"checkbox-custom\">\n                                <input type=\"checkbox\" id=\"shadowCheck\">\n                                <span class=\"slider-toggle\"><\/span>\n                            <\/label>\n                        <\/div>\n                        <div class=\"flex items-center justify-between\">\n                            <span class=\"text-sm\">Gradient Text<\/span>\n                            <label class=\"checkbox-custom\">\n                                <input type=\"checkbox\" id=\"gradientCheck\">\n                                <span class=\"slider-toggle\"><\/span>\n                            <\/label>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Quick Presets -->\n                <div class=\"mb-6\">\n                    <label class=\"block text-sm font-semibold text-gray-700 mb-3\">\n                        <i class=\"fas fa-star mr-2\"><\/i>Quick Presets\n                    <\/label>\n                    <div class=\"grid grid-cols-2 gap-2\">\n                        <button class=\"preset-button p-3 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-lg text-sm font-semibold\" onclick=\"applyPreset('neon')\">\n                            Neon Glow\n                        <\/button>\n                        <button class=\"preset-button p-3 bg-gradient-to-r from-green-400 to-blue-500 text-white rounded-lg text-sm font-semibold\" onclick=\"applyPreset('retro')\">\n                            Retro Vibe\n                        <\/button>\n                        <button class=\"preset-button p-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white rounded-lg text-sm font-semibold\" onclick=\"applyPreset('sunset')\">\n                            Sunset\n                        <\/button>\n                        <button class=\"preset-button p-3 bg-gradient-to-r from-purple-400 to-pink-400 text-white rounded-lg text-sm font-semibold\" onclick=\"applyPreset('pastel')\">\n                            Pastel Dream\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Action Buttons -->\n                <div class=\"flex flex-col sm:flex-row gap-3\">\n                    <button \n                        id=\"resetBtn\" \n                        class=\"btn-secondary text-white px-6 py-3 rounded-xl font-semibold flex items-center justify-center\"\n                    >\n                        <i class=\"fas fa-undo mr-2\"><\/i>Reset All\n                    <\/button>\n                    <button \n                        id=\"exportBtn\" \n                        class=\"btn-primary text-white px-6 py-3 rounded-xl font-semibold flex items-center justify-center\"\n                    >\n                        <i class=\"fas fa-download mr-2\"><\/i>Export\n                    <\/button>\n                <\/div>\n\n                <!-- Export Options -->\n                <div id=\"exportOptions\" class=\"export-options mt-4 p-4 bg-gray-100 rounded-xl\">\n                    <h3 class=\"font-semibold mb-3\">Export Options<\/h3>\n                    <div class=\"grid grid-cols-2 gap-2\">\n                        <button onclick=\"exportAsImage()\" class=\"p-2 bg-blue-500 text-white rounded-lg text-sm\">\n                            <i class=\"fas fa-image mr-1\"><\/i>PNG Image\n                        <\/button>\n                        <button onclick=\"copyCSS()\" class=\"p-2 bg-green-500 text-white rounded-lg text-sm\">\n                            <i class=\"fas fa-code mr-1\"><\/i>Copy CSS\n                        <\/button>\n                        <button onclick=\"copyHTML()\" class=\"p-2 bg-purple-500 text-white rounded-lg text-sm\">\n                            <i class=\"fas fa-file-code mr-1\"><\/i>Copy HTML\n                        <\/button>\n                        <button onclick=\"saveAsHTML()\" class=\"p-2 bg-orange-500 text-white rounded-lg text-sm\">\n                            <i class=\"fas fa-save mr-1\"><\/i>Save HTML\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Preview Panel -->\n            <div class=\"bg-white rounded-2xl p-6 shadow-2xl\">\n                <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">\n                    <i class=\"fas fa-eye mr-2\"><\/i>Live Preview\n                <\/h2>\n                <div class=\"bg-gray-100 rounded-xl p-8 min-h-96 flex items-center justify-center\">\n                    <div \n                        id=\"textPreview\" \n                        class=\"text-preview text-center font-bold\"\n                        style=\"color: #ffffff; background-color: #1a1a1a; font-size: 48px; padding: 20px; border-radius: 12px; font-family: Inter;\"\n                    >\n                        BRAT SUMMER\n                    <\/div>\n                <\/div>\n                \n                <!-- Preview Info -->\n                <div class=\"mt-4 p-4 bg-gray-50 rounded-xl\">\n                    <h3 class=\"font-semibold mb-2\">Current Styles:<\/h3>\n                    <div class=\"text-sm text-gray-600 space-y-1\">\n                        <div>Font: <span id=\"currentFont\">Inter<\/span><\/div>\n                        <div>Size: <span id=\"currentSize\">48px<\/span><\/div>\n                        <div>Color: <span id=\"currentColor\">#ffffff<\/span><\/div>\n                        <div>Background: <span id=\"currentBg\">#1a1a1a<\/span><\/div>\n                        <div>Effects: <span id=\"currentEffects\">None<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <script>\n        \/\/ DOM Elements\n        const textInput = document.getElementById('textInput');\n        const textColor = document.getElementById('textColor');\n        const bgColor = document.getElementById('bgColor');\n        const textSize = document.getElementById('textSize');\n        const boldCheck = document.getElementById('boldCheck');\n        const italicCheck = document.getElementById('italicCheck');\n        const underlineCheck = document.getElementById('underlineCheck');\n        const fontFamily = document.getElementById('fontFamily');\n        const shadowCheck = document.getElementById('shadowCheck');\n        const gradientCheck = document.getElementById('gradientCheck');\n        const textPreview = document.getElementById('textPreview');\n        const resetBtn = document.getElementById('resetBtn');\n        const exportBtn = document.getElementById('exportBtn');\n        const exportOptions = document.getElementById('exportOptions');\n\n        \/\/ Color value displays\n        const textColorValue = document.getElementById('textColorValue');\n        const bgColorValue = document.getElementById('bgColorValue');\n        const sizeValue = document.getElementById('sizeValue');\n\n        \/\/ Current style displays\n        const currentFont = document.getElementById('currentFont');\n        const currentSize = document.getElementById('currentSize');\n        const currentColor = document.getElementById('currentColor');\n        const currentBg = document.getElementById('currentBg');\n        const currentEffects = document.getElementById('currentEffects');\n\n        \/\/ Default values\n        const defaults = {\n            text: 'BRAT SUMMER',\n            textColor: '#ffffff',\n            bgColor: '#1a1a1a',\n            size: 48,\n            bold: false,\n            italic: false,\n            underline: false,\n            fontFamily: 'Inter',\n            shadow: false,\n            gradient: false\n        };\n\n        \/\/ Update preview function\n        function updatePreview() {\n            const text = textInput.value || 'BRAT SUMMER';\n            textPreview.textContent = text;\n\n            \/\/ Build style object\n            let styles = {\n                color: gradientCheck.checked ? 'transparent' : textColor.value,\n                backgroundColor: bgColor.value,\n                fontSize: textSize.value + 'px',\n                fontFamily: fontFamily.value,\n                fontWeight: boldCheck.checked ? 'bold' : 'normal',\n                fontStyle: italicCheck.checked ? 'italic' : 'normal',\n                textDecoration: underlineCheck.checked ? 'underline' : 'none',\n                padding: '20px',\n                borderRadius: '12px',\n                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'\n            };\n\n            \/\/ Add text shadow\n            if (shadowCheck.checked) {\n                styles.textShadow = '0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3)';\n            } else {\n                styles.textShadow = 'none';\n            }\n\n            \/\/ Add gradient text\n            if (gradientCheck.checked) {\n                styles.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7)';\n                styles.backgroundClip = 'text';\n                styles.webkitBackgroundClip = 'text';\n                styles.backgroundSize = '400% 400%';\n                styles.animation = 'gradientShift 3s ease infinite';\n            } else {\n                styles.background = 'none';\n                styles.backgroundClip = 'unset';\n                styles.webkitBackgroundClip = 'unset';\n                styles.animation = 'none';\n            }\n\n            \/\/ Apply styles\n            Object.assign(textPreview.style, styles);\n\n            \/\/ Update color value displays\n            textColorValue.textContent = textColor.value;\n            bgColorValue.textContent = bgColor.value;\n            sizeValue.textContent = textSize.value + 'px';\n\n            \/\/ Update current style info\n            currentFont.textContent = fontFamily.value;\n            currentSize.textContent = textSize.value + 'px';\n            currentColor.textContent = textColor.value;\n            currentBg.textContent = bgColor.value;\n\n            \/\/ Update effects display\n            const effects = [];\n            if (boldCheck.checked) effects.push('Bold');\n            if (italicCheck.checked) effects.push('Italic');\n            if (underlineCheck.checked) effects.push('Underline');\n            if (shadowCheck.checked) effects.push('Shadow');\n            if (gradientCheck.checked) effects.push('Gradient');\n            currentEffects.textContent = effects.length ? effects.join(', ') : 'None';\n        }\n\n        \/\/ Add gradient animation keyframes\n        if (!document.querySelector('#gradientAnimation')) {\n            const style = document.createElement('style');\n            style.id = 'gradientAnimation';\n            style.textContent = `\n                @keyframes gradientShift {\n                    0% { background-position: 0% 50%; }\n                    50% { background-position: 100% 50%; }\n                    100% { background-position: 0% 50%; }\n                }\n            `;\n            document.head.appendChild(style);\n        }\n\n        \/\/ Reset function\n        function resetToDefaults() {\n            textInput.value = defaults.text;\n            textColor.value = defaults.textColor;\n            bgColor.value = defaults.bgColor;\n            textSize.value = defaults.size;\n            boldCheck.checked = defaults.bold;\n            italicCheck.checked = defaults.italic;\n            underlineCheck.checked = defaults.underline;\n            fontFamily.value = defaults.fontFamily;\n            shadowCheck.checked = defaults.shadow;\n            gradientCheck.checked = defaults.gradient;\n            updatePreview();\n        }\n\n        \/\/ Preset functions\n        function applyPreset(preset) {\n            switch(preset) {\n                case 'neon':\n                    textColor.value = '#00ffff';\n                    bgColor.value = '#000000';\n                    textSize.value = 64;\n                    boldCheck.checked = true;\n                    shadowCheck.checked = true;\n                    gradientCheck.checked = false;\n                    fontFamily.value = 'Impact';\n                    break;\n                case 'retro':\n                    textColor.value = '#ff00ff';\n                    bgColor.value = '#1a0033';\n                    textSize.value = 56;\n                    boldCheck.checked = true;\n                    shadowCheck.checked = true;\n                    gradientCheck.checked = true;\n                    fontFamily.value = 'Arial';\n                    break;\n                case 'sunset':\n                    textColor.value = '#ff4500';\n                    bgColor.value = '#ffd700';\n                    textSize.value = 52;\n                    boldCheck.checked = true;\n                    shadowCheck.checked = false;\n                    gradientCheck.checked = true;\n                    fontFamily.value = 'Georgia';\n                    break;\n                case 'pastel':\n                    textColor.value = '#ff69b4';\n                    bgColor.value = '#f0f8ff';\n                    textSize.value = 48;\n                    boldCheck.checked = false;\n                    italicCheck.checked = true;\n                    shadowCheck.checked = false;\n                    gradientCheck.checked = true;\n                    fontFamily.value = 'Verdana';\n                    break;\n            }\n            updatePreview();\n        }\n\n        \/\/ Export functions\n        function exportAsImage() {\n            \/\/ Create a canvas to render the text\n            const canvas = document.createElement('canvas');\n            const ctx = canvas.getContext('2d');\n            \n            canvas.width = 800;\n            canvas.height = 400;\n            \n            \/\/ Apply background\n            ctx.fillStyle = bgColor.value;\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\n            \n            \/\/ Set font properties\n            let fontWeight = boldCheck.checked ? 'bold' : 'normal';\n            let fontStyle = italicCheck.checked ? 'italic' : 'normal';\n            ctx.font = `${fontStyle} ${fontWeight} ${textSize.value}px ${fontFamily.value}`;\n            \n            \/\/ Set text color\n            ctx.fillStyle = textColor.value;\n            ctx.textAlign = 'center';\n            ctx.textBaseline = 'middle';\n            \n            \/\/ Add shadow if enabled\n            if (shadowCheck.checked) {\n                ctx.shadowColor = 'rgba(255, 255, 255, 0.5)';\n                ctx.shadowBlur = 20;\n            }\n            \n            \/\/ Draw text\n            const text = textInput.value || 'BRAT SUMMER';\n            ctx.fillText(text, canvas.width \/ 2, canvas.height \/ 2);\n            \n            \/\/ Download the image\n            const link = document.createElement('a');\n            link.download = 'brat-text.png';\n            link.href = canvas.toDataURL();\n            link.click();\n        }\n\n        function copyCSS() {\n            const styles = window.getComputedStyle(textPreview);\n            const cssText = `\n.brat-text {\n    color: ${textColor.value};\n    background-color: ${bgColor.value};\n    font-size: ${textSize.value}px;\n    font-family: ${fontFamily.value};\n    font-weight: ${boldCheck.checked ? 'bold' : 'normal'};\n    font-style: ${italicCheck.checked ? 'italic' : 'normal'};\n    text-decoration: ${underlineCheck.checked ? 'underline' : 'none'};\n    ${shadowCheck.checked ? 'text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);' : ''}\n    ${gradientCheck.checked ? `\n    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;` : ''}\n    padding: 20px;\n    border-radius: 12px;\n    display: inline-block;\n}`;\n            \n            navigator.clipboard.writeText(cssText).then(() => {\n                alert('CSS copied to clipboard!');\n            });\n        }\n\n        function copyHTML() {\n            const htmlText = `<div class=\"brat-text\">${textInput.value || 'BRAT SUMMER'}<\/div>`;\n            navigator.clipboard.writeText(htmlText).then(() => {\n                alert('HTML copied to clipboard!');\n            });\n        }\n\n        function saveAsHTML() {\n            const htmlContent = `\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Brat Text<\/title>\n    <style>\n        .brat-text {\n            color: ${textColor.value};\n            background-color: ${bgColor.value};\n            font-size: ${textSize.value}px;\n            font-family: ${fontFamily.value};\n            font-weight: ${boldCheck.checked ? 'bold' : 'normal'};\n            font-style: ${italicCheck.checked ? 'italic' : 'normal'};\n            text-decoration: ${underlineCheck.checked ? 'underline' : 'none'};\n            ${shadowCheck.checked ? 'text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);' : ''}\n            ${gradientCheck.checked ? `\n            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);\n            background-clip: text;\n            -webkit-background-clip: text;\n            color: transparent;\n            background-size: 400% 400%;\n            animation: gradientShift 3s ease infinite;` : ''}\n            padding: 20px;\n            border-radius: 12px;\n            display: inline-block;\n        }\n        \n        @keyframes gradientShift {\n            0% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n            100% { background-position: 0% 50%; }\n        }\n        \n        body {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            margin: 0;\n            background: #f0f0f0;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"brat-text\">${textInput.value || 'BRAT SUMMER'}<\/div>\n<\/body>\n<\/html>`;\n            \n            const blob = new Blob([htmlContent], { type: 'text\/html' });\n            const link = document.createElement('a');\n            link.download = 'brat-text.html';\n            link.href = URL.createObjectURL(blob);\n            link.click();\n        }\n\n        \/\/ Event listeners\n        textInput.addEventListener('input', updatePreview);\n        textColor.addEventListener('input', updatePreview);\n        bgColor.addEventListener('input', updatePreview);\n        textSize.addEventListener('input', updatePreview);\n        boldCheck.addEventListener('change', updatePreview);\n        italicCheck.addEventListener('change', updatePreview);\n        underlineCheck.addEventListener('change', updatePreview);\n        fontFamily.addEventListener('change', updatePreview);\n        shadowCheck.addEventListener('change', updatePreview);\n        gradientCheck.addEventListener('change', updatePreview);\n\n        resetBtn.addEventListener('click', resetToDefaults);\n        \n        exportBtn.addEventListener('click', () => {\n            exportOptions.classList.toggle('show');\n        });\n\n        \/\/ Initialize\n        updatePreview();\n    <\/script>\n\n\n\n<div class=\"max-w-5xl mx-auto px-4 py-8\">\n  <!-- Header \/ Hero -->\n  <div class=\"rounded-2xl overflow-hidden shadow-lg border border-gray-100\">\n    <div class=\"p-8 md:p-10\" style=\"background:#8ACE00;\">\n      <div class=\"flex flex-col md:flex-row md:items-end md:justify-between gap-6\">\n        <div>\n          <div class=\"inline-flex items-center bg-black\/10 text-black px-3 py-1 rounded-full text-sm font-semibold\">\n            <i class=\"fa-solid fa-bolt mr-2\"><\/i> 2026 Aesthetic Breakdown\n          <\/div>\n\n          <div class=\"mt-4 text-black\">\n            <h2 class=\"text-3xl md:text-4xl font-extrabold leading-tight\">\n              Brat Summer: The Neon-Green, Anti-Design Wave\n            <\/h2>\n            <div class=\"mt-3 text-base md:text-lg leading-relaxed max-w-2xl\">\n              The internet moves fast, but some aesthetics explode so hard they define an entire season. In 2024, that moment belonged\n              to Brat Summer\u2014a chaotic, confident, neon-green cultural wave inspired by\n              <a class=\"underline font-semibold\" href=\"https:\/\/en.wikipedia.org\/wiki\/Charli_XCX\" target=\"_blank\" rel=\"noopener noreferrer\">Charli XCX<\/a>\n              and her album\n              <a class=\"underline font-semibold\" href=\"https:\/\/en.wikipedia.org\/wiki\/Brat_(album)\" target=\"_blank\" rel=\"noopener noreferrer\">Brat<\/a>.\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"bg-white\/90 rounded-xl p-4 md:p-5 shadow-sm w-full md:w-auto\">\n          <div class=\"text-sm text-gray-600 font-medium\">Signature palette<\/div>\n          <div class=\"mt-2 grid grid-cols-2 gap-3\">\n            <div class=\"rounded-lg p-3 border border-gray-100\">\n              <div class=\"text-xs text-gray-500\">Background<\/div>\n              <div class=\"mt-1 font-bold text-gray-900\">#8ACE00<\/div>\n              <div class=\"mt-2 h-8 rounded\" style=\"background:#8ACE00;\"><\/div>\n            <\/div>\n            <div class=\"rounded-lg p-3 border border-gray-100\">\n              <div class=\"text-xs text-gray-500\">Text<\/div>\n              <div class=\"mt-1 font-bold text-gray-900\">#000000<\/div>\n              <div class=\"mt-2 h-8 rounded bg-black\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"mt-3 text-xs text-gray-500\">\n            If you\u2019ve seen bold black text on lime green across Instagram\/X\/memes\u2014you\u2019ve already met it.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"bg-white p-6 md:p-7\">\n      <!-- Quick nav -->\n      <div class=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n        <div class=\"text-gray-700 font-semibold\">\n          Jump to:\n        <\/div>\n        <div class=\"flex flex-wrap gap-2\">\n          <a href=\"#what-is\" class=\"px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium\">\n            <i class=\"fa-regular fa-circle-question mr-2\"><\/i>What it is\n          <\/a>\n          <a href=\"#how-to-use\" class=\"px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium\">\n            <i class=\"fa-solid fa-wand-magic-sparkles mr-2\"><\/i>How to generate\n          <\/a>\n          <a href=\"#impact\" class=\"px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium\">\n            <i class=\"fa-solid fa-chart-line mr-2\"><\/i>Cultural impact\n          <\/a>\n          <a href=\"#faq\" class=\"px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium\">\n            <i class=\"fa-solid fa-list-check mr-2\"><\/i>FAQ\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Section: What is the Brat Text Aesthetic -->\n  <div id=\"what-is\" class=\"mt-8 bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n    <div class=\"p-6 md:p-8 border-b border-gray-100\">\n      <div class=\"flex items-start gap-4\">\n        <div class=\"h-11 w-11 rounded-xl flex items-center justify-center bg-gray-900 text-white\">\n          <i class=\"fa-solid fa-font text-lg\"><\/i>\n        <\/div>\n        <div>\n          <h2 class=\"text-2xl font-extrabold text-gray-900\">\n            What is the Brat Text Aesthetic?\n          <\/h2>\n          <div class=\"mt-2 text-gray-600 leading-relaxed\">\n            In 2024, <a class=\"underline font-semibold\" href=\"https:\/\/en.wikipedia.org\/wiki\/Charli_XCX\" target=\"_blank\" rel=\"noopener noreferrer\">Charli XCX<\/a>\n            released <a class=\"underline font-semibold\" href=\"https:\/\/en.wikipedia.org\/wiki\/Brat_(album)\" target=\"_blank\" rel=\"noopener noreferrer\">Brat<\/a>\u2014and instead of polished pop visuals,\n            the era delivered something radically simple: loud color + blunt typography.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"p-6 md:p-8\">\n      <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n        <div class=\"rounded-xl border border-gray-100 p-5 bg-gray-50\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-white flex items-center justify-center border border-gray-100\">\n              <i class=\"fa-solid fa-ban text-gray-800\"><\/i>\n            <\/div>\n            <div class=\"font-bold text-gray-900\">The Anti-Design Philosophy<\/div>\n          <\/div>\n          <div class=\"mt-3 text-gray-700 text-sm leading-relaxed\">\n            The cover breaks traditional design rules on purpose\u2014raw, minimal, and almost \u201cunfinished.\u201d\n          <\/div>\n        <\/div>\n\n        <div class=\"rounded-xl border border-gray-100 p-5 bg-gray-50\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-white flex items-center justify-center border border-gray-100\">\n              <i class=\"fa-solid fa-droplet text-gray-800\"><\/i>\n            <\/div>\n            <div class=\"font-bold text-gray-900\">Signature Brat Green<\/div>\n          <\/div>\n          <div class=\"mt-3 text-gray-700 text-sm leading-relaxed\">\n            The famous Brat Green hex code:\n            <span class=\"inline-flex items-center px-2 py-1 rounded-md font-bold text-black ml-1\" style=\"background:#8ACE00;\">#8ACE00<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"rounded-xl border border-gray-100 p-5 bg-gray-50\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-white flex items-center justify-center border border-gray-100\">\n              <i class=\"fa-solid fa-face-grin-stars text-gray-800\"><\/i>\n            <\/div>\n            <div class=\"font-bold text-gray-900\">Why Gen Z Loved It<\/div>\n          <\/div>\n          <div class=\"mt-3 text-gray-700 text-sm leading-relaxed\">\n            It rejects perfection and leans into irony, authenticity, and meme-first energy.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Bullet cards -->\n      <div class=\"mt-6 grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-ruler-combined text-gray-900\"><\/i> What it looks like (by design)\n          <\/div>\n          <div class=\"mt-3 text-gray-700\">\n            <div class=\"space-y-2 text-sm leading-relaxed\">\n              <div class=\"flex gap-2\"><div class=\"mt-1 text-gray-400\"><i class=\"fa-solid fa-check\"><\/i><\/div><div>Low-resolution text<\/div><\/div>\n              <div class=\"flex gap-2\"><div class=\"mt-1 text-gray-400\"><i class=\"fa-solid fa-check\"><\/i><\/div><div>Slightly blurred effect<\/div><\/div>\n              <div class=\"flex gap-2\"><div class=\"mt-1 text-gray-400\"><i class=\"fa-solid fa-check\"><\/i><\/div><div>Arial-style sans-serif font<\/div><\/div>\n              <div class=\"flex gap-2\"><div class=\"mt-1 text-gray-400\"><i class=\"fa-solid fa-check\"><\/i><\/div><div>No graphics, gradients, or shadows<\/div><\/div>\n              <div class=\"flex gap-2\"><div class=\"mt-1 text-gray-400\"><i class=\"fa-solid fa-check\"><\/i><\/div><div>Flat, hyper-saturated green background<\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-fire text-gray-900\"><\/i> From album art to meme culture\n          <\/div>\n          <div class=\"mt-3 text-gray-700 text-sm leading-relaxed\">\n            Fans recreated the vibe everywhere\u2014using Brat meme makers, logo generator templates,\n            and custom \u201cBrat Summer\u201d text graphics. That\u2019s where a Brat Text Generator fits in:\n            type something short, export, post, repeat.\n          <\/div>\n\n          <div class=\"mt-4 rounded-lg p-4 border border-gray-100 bg-gray-50\">\n            <div class=\"text-xs text-gray-500 font-semibold uppercase tracking-wide\">Rule of thumb<\/div>\n            <div class=\"mt-1 text-sm text-gray-800\">\n              The less \u201cdesigned\u201d it feels, the more it reads as Brat.\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Section: How to Use the Brat Text Generator -->\n  <div id=\"how-to-use\" class=\"mt-8 bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n    <div class=\"p-6 md:p-8 border-b border-gray-100\">\n      <div class=\"flex items-start gap-4\">\n        <div class=\"h-11 w-11 rounded-xl flex items-center justify-center bg-gray-900 text-white\">\n          <i class=\"fa-solid fa-wand-magic-sparkles text-lg\"><\/i>\n        <\/div>\n        <div>\n          <h3 class=\"text-2xl font-extrabold text-gray-900\">\n            How to Use the Brat Text Generator\n          <\/h3>\n          <div class=\"mt-2 text-gray-600 leading-relaxed\">\n            If you want to create your own Brat-style graphic, follow this quick workflow.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"p-6 md:p-8\">\n      <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n        <!-- Step 1 -->\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"flex items-center justify-between gap-3\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"h-9 w-9 rounded-lg bg-gray-900 text-white flex items-center justify-center font-bold\">1<\/div>\n              <div class=\"font-bold text-gray-900\">Enter your text<\/div>\n            <\/div>\n            <div class=\"text-xs text-gray-500 font-semibold\">Keep it 1\u20133 words<\/div>\n          <\/div>\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            Type a short word or phrase. The aesthetic works best when it\u2019s blunt and quick.\n          <\/div>\n\n          <div class=\"mt-4 rounded-lg bg-gray-50 border border-gray-100 p-4\">\n            <div class=\"text-xs text-gray-500 font-semibold uppercase tracking-wide\">Popular ideas<\/div>\n            <div class=\"mt-2 flex flex-wrap gap-2\">\n              <div class=\"px-3 py-1 rounded-full bg-white border border-gray-100 text-sm text-gray-800\">brat era<\/div>\n              <div class=\"px-3 py-1 rounded-full bg-white border border-gray-100 text-sm text-gray-800\">delulu but confident<\/div>\n              <div class=\"px-3 py-1 rounded-full bg-white border border-gray-100 text-sm text-gray-800\">main character<\/div>\n              <div class=\"px-3 py-1 rounded-full bg-white border border-gray-100 text-sm text-gray-800\">your name<\/div>\n              <div class=\"px-3 py-1 rounded-full bg-white border border-gray-100 text-sm text-gray-800\">inside jokes<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Step 2 -->\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-gray-900 text-white flex items-center justify-center font-bold\">2<\/div>\n            <div class=\"font-bold text-gray-900\">Select the colors<\/div>\n          <\/div>\n\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            To stay instantly recognizable, use the official palette. The contrast is the whole point.\n          <\/div>\n\n          <div class=\"mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3\">\n            <div class=\"rounded-lg border border-gray-100 p-4\">\n              <div class=\"text-xs text-gray-500\">Background<\/div>\n              <div class=\"mt-1 font-bold text-gray-900\">#8ACE00<\/div>\n              <div class=\"mt-2 h-10 rounded\" style=\"background:#8ACE00;\"><\/div>\n            <\/div>\n            <div class=\"rounded-lg border border-gray-100 p-4\">\n              <div class=\"text-xs text-gray-500\">Text<\/div>\n              <div class=\"mt-1 font-bold text-gray-900\">#000000<\/div>\n              <div class=\"mt-2 h-10 rounded bg-black\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Step 3 -->\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-gray-900 text-white flex items-center justify-center font-bold\">3<\/div>\n            <div class=\"font-bold text-gray-900\">Adjust the font (anti-design rules)<\/div>\n          <\/div>\n\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            Aim for a slightly distorted, low-res Arial-like look. Keep it plain and imperfect\u2014no fancy effects.\n          <\/div>\n\n          <div class=\"mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n            <div class=\"rounded-lg bg-gray-50 border border-gray-100 p-4\">\n              <div class=\"font-semibold text-gray-900\"><i class=\"fa-solid fa-thumbs-up mr-2 text-gray-700\"><\/i>Use<\/div>\n              <div class=\"mt-2 space-y-2 text-gray-700\">\n                <div>Arial \/ Helvetica \/ clean sans-serif<\/div>\n                <div>Natural spacing<\/div>\n                <div>Subtle blur \/ reduced sharpness<\/div>\n              <\/div>\n            <\/div>\n            <div class=\"rounded-lg bg-gray-50 border border-gray-100 p-4\">\n              <div class=\"font-semibold text-gray-900\"><i class=\"fa-solid fa-thumbs-down mr-2 text-gray-700\"><\/i>Avoid<\/div>\n              <div class=\"mt-2 space-y-2 text-gray-700\">\n                <div>Heavy bold effects<\/div>\n                <div>Shadows, outlines, gradients<\/div>\n                <div>Over-polished typography<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Step 4 -->\n        <div class=\"rounded-xl border border-gray-100 p-6\">\n          <div class=\"flex items-center gap-3\">\n            <div class=\"h-9 w-9 rounded-lg bg-gray-900 text-white flex items-center justify-center font-bold\">4<\/div>\n            <div class=\"font-bold text-gray-900\">Download &#038; share<\/div>\n          <\/div>\n\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            Export as PNG, choose the right ratio for the platform, and post it like a meme.\n          <\/div>\n\n          <div class=\"mt-4 rounded-lg border border-gray-100 p-4\">\n            <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm\">\n              <div class=\"rounded-lg bg-gray-50 border border-gray-100 p-4\">\n                <div class=\"font-semibold text-gray-900\">Instagram<\/div>\n                <div class=\"mt-1 text-gray-700\">Square 1:1<\/div>\n              <\/div>\n              <div class=\"rounded-lg bg-gray-50 border border-gray-100 p-4\">\n                <div class=\"font-semibold text-gray-900\">Stories \/ Banners<\/div>\n                <div class=\"mt-1 text-gray-700\">16:9<\/div>\n              <\/div>\n              <div class=\"rounded-lg bg-gray-50 border border-gray-100 p-4\">\n                <div class=\"font-semibold text-gray-900\">X Header<\/div>\n                <div class=\"mt-1 text-gray-700\">Wide banner<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- CTA -->\n      <div class=\"mt-6 rounded-2xl p-6 md:p-7 border border-gray-100 bg-gray-900 text-white\">\n        <div class=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n          <div>\n            <div class=\"text-lg font-extrabold\">Want the simplest version of the vibe?<\/div>\n            <div class=\"mt-1 text-gray-200 text-sm\">\n              Type it. Generate it. Share it. No Photoshop required.\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Section: Cultural Impact -->\n  <div id=\"impact\" class=\"mt-8 bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n    <div class=\"p-6 md:p-8 border-b border-gray-100\">\n      <div class=\"flex items-start gap-4\">\n        <div class=\"h-11 w-11 rounded-xl flex items-center justify-center bg-gray-900 text-white\">\n          <i class=\"fa-solid fa-chart-line text-lg\"><\/i>\n        <\/div>\n        <div>\n          <h3 class=\"text-2xl font-extrabold text-gray-900\">\n            The Cultural Impact of \u201cBrat Summer\u201d\n          <\/h3>\n          <div class=\"mt-2 text-gray-600 leading-relaxed\">\n            Brat Summer wasn\u2019t just a music moment\u2014it became a cultural shorthand for bold, unapologetic energy.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"p-6 md:p-8\">\n      <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n\n        <div class=\"rounded-xl border border-gray-100 p-6 bg-gray-50\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-bullhorn text-gray-900\"><\/i>\n            Corporate branding jumped in\n          <\/div>\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            Brands recreated Brat-style graphics and lime-green announcements because the palette is instantly recognizable.\n            It\u2019s a fast track to cultural relevance\u2014especially on social.\n          <\/div>\n        <\/div>\n\n        <div class=\"rounded-xl border border-gray-100 p-6 bg-gray-50\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-brands fa-google text-gray-900\"><\/i>\n            Why search interest spikes\n          <\/div>\n          <div class=\"mt-3 text-sm text-gray-700 leading-relaxed\">\n            The trend is educational: it connects music history, graphic design philosophy, meme culture, and corporate adaptation\u2014\n            which is why related searches surged.\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- Section: Why it's popular + Oualator -->\n  <div class=\"mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6\">\n    <div class=\"bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n      <div class=\"p-6 md:p-8 border-b border-gray-100\">\n        <h3 class=\"text-xl font-extrabold text-gray-900\">Why the Brat Text Generator is so popular<\/h3>\n        <div class=\"mt-2 text-gray-600\">Three big reasons people keep using it:<\/div>\n      <\/div>\n      <div class=\"p-6 md:p-8 space-y-4\">\n        <div class=\"rounded-xl border border-gray-100 p-5\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-wand-sparkles text-gray-900\"><\/i> Simplicity\n          <\/div>\n          <div class=\"mt-2 text-sm text-gray-700\">No design skills needed. Just type and download.<\/div>\n        <\/div>\n        <div class=\"rounded-xl border border-gray-100 p-5\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-eye text-gray-900\"><\/i> Instant recognition\n          <\/div>\n          <div class=\"mt-2 text-sm text-gray-700\">Lime green + black = unmistakable Brat energy.<\/div>\n        <\/div>\n        <div class=\"rounded-xl border border-gray-100 p-5\">\n          <div class=\"font-bold text-gray-900 flex items-center gap-2\">\n            <i class=\"fa-solid fa-share-nodes text-gray-900\"><\/i> Meme-ready format\n          <\/div>\n          <div class=\"mt-2 text-sm text-gray-700\">Short text. Big attitude. Easy to post anywhere.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n      <div class=\"p-6 md:p-8 border-b border-gray-100\">\n        <h4 class=\"text-xl font-extrabold text-gray-900\">\n          How Oualator\u2019s version stands out\n        <\/h4>\n        <div class=\"mt-2 text-gray-600\">If you\u2019re using Oualator\u2019s Brat-style tool, here\u2019s what people like about it:<\/div>\n      <\/div>\n\n      <div class=\"p-6 md:p-8\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm\">\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-tag mr-2\"><\/i>Free to use<\/div>\n            <div class=\"mt-2 text-gray-700\">For personal and social media use.<\/div>\n          <\/div>\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-ban mr-2\"><\/i>No watermark<\/div>\n            <div class=\"mt-2 text-gray-700\">Clean exports that feel native.<\/div>\n          <\/div>\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-image mr-2\"><\/i>High-res PNG<\/div>\n            <div class=\"mt-2 text-gray-700\">Sharp enough for headers and posts.<\/div>\n          <\/div>\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-mobile-screen mr-2\"><\/i>Mobile-friendly<\/div>\n            <div class=\"mt-2 text-gray-700\">Easy to generate on a phone.<\/div>\n          <\/div>\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-eye-dropper mr-2\"><\/i>Exact hex match<\/div>\n            <div class=\"mt-2 text-gray-700\">Built around <span class=\"font-bold\">#8ACE00<\/span>.<\/div>\n          <\/div>\n          <div class=\"rounded-xl bg-gray-50 border border-gray-100 p-5\">\n            <div class=\"font-bold text-gray-900\"><i class=\"fa-solid fa-font mr-2\"><\/i>Clean Arial base<\/div>\n            <div class=\"mt-2 text-gray-700\">Minimal typography\u2014anti-design approved.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"mt-6 rounded-xl p-5 border border-gray-100\" style=\"background:#8ACE00;\">\n          <div class=\"text-black font-extrabold text-lg\">Anti-design reminder<\/div>\n          <div class=\"mt-1 text-black\/80 text-sm leading-relaxed\">\n            You don\u2019t need Photoshop or Illustrator. The Brat aesthetic is about stripping away complexity.\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- FAQ -->\n  <div id=\"faq\" class=\"mt-8 bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n    <div class=\"p-6 md:p-8 border-b border-gray-100\">\n      <div class=\"flex items-start gap-4\">\n        <div class=\"h-11 w-11 rounded-xl flex items-center justify-center bg-gray-900 text-white\">\n          <i class=\"fa-solid fa-list-check text-lg\"><\/i>\n        <\/div>\n        <div>\n          <h4 class=\"text-2xl font-extrabold text-gray-900\">Frequently Asked Questions<\/h4>\n          <div class=\"mt-2 text-gray-600\">Quick answers to the most common Brat-style questions.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"p-6 md:p-8 space-y-4\">\n      <div class=\"rounded-xl border border-gray-100 p-6\">\n        <div class=\"font-bold text-gray-900\">What is the hex code for Brat Green?<\/div>\n        <div class=\"mt-2 text-sm text-gray-700\">\n          The official Brat Green hex code is <span class=\"font-bold\">#8ACE00<\/span>.\n        <\/div>\n      <\/div>\n\n      <div class=\"rounded-xl border border-gray-100 p-6\">\n        <div class=\"font-bold text-gray-900\">What font does the Brat album use?<\/div>\n        <div class=\"mt-2 text-sm text-gray-700\">\n          A distorted, slightly low-resolution version of Arial (or a very similar sans-serif). The key is minimalism and subtle blur.\n        <\/div>\n      <\/div>\n\n      <div class=\"rounded-xl border border-gray-100 p-6\">\n        <div class=\"font-bold text-gray-900\">Is this tool free to use?<\/div>\n        <div class=\"mt-2 text-sm text-gray-700\">\n          Yes\u2014Oualator provides the Brat Text Generator for free for personal and social media use.\n        <\/div>\n      <\/div>\n\n      <div class=\"rounded-xl border border-gray-100 p-6\">\n        <div class=\"font-bold text-gray-900\">Can I use a Brat Meme Maker for commercial projects?<\/div>\n        <div class=\"mt-2 text-sm text-gray-700\">\n          It depends on copyright and branding usage rules. Parody\/fan content is common, but commercial branding should be cautious\n          about directly mimicking album-art styling.\n        <\/div>\n      <\/div>\n\n      <div class=\"rounded-xl border border-gray-100 p-6\">\n        <div class=\"font-bold text-gray-900\">Why did Brat Summer become so popular?<\/div>\n        <div class=\"mt-2 text-sm text-gray-700\">\n          Because it combined minimalist album art, bold identity messaging, Gen Z meme culture, anti-design philosophy,\n          and shareable\/replicable visuals.\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Final Thoughts -->\n  <div class=\"mt-8 rounded-2xl shadow-lg border border-gray-100 overflow-hidden\">\n    <div class=\"p-7 md:p-9 bg-gray-900 text-white\">\n      <h4 class=\"text-2xl font-extrabold\">Final Thoughts<\/h4>\n      <div class=\"mt-3 text-gray-200 leading-relaxed\">\n        The rise of the Brat Text Generator proves something powerful about internet culture:\n        you don\u2019t need complex graphics to dominate a timeline\u2014you need bold identity and strong visual consistency.\n      <\/div>\n\n      <div class=\"mt-5 grid grid-cols-1 md:grid-cols-3 gap-3 text-sm\">\n        <div class=\"rounded-xl bg-white\/10 border border-white\/10 p-4\">\n          <div class=\"font-bold\">1) Lime green<\/div>\n          <div class=\"mt-1 text-gray-200\">#8ACE00<\/div>\n        <\/div>\n        <div class=\"rounded-xl bg-white\/10 border border-white\/10 p-4\">\n          <div class=\"font-bold\">2) Black text<\/div>\n          <div class=\"mt-1 text-gray-200\">#000000<\/div>\n        <\/div>\n        <div class=\"rounded-xl bg-white\/10 border border-white\/10 p-4\">\n          <div class=\"font-bold\">3) Distorted Arial vibe<\/div>\n          <div class=\"mt-1 text-gray-200\">Subtle blur, no effects<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"mt-6 rounded-xl p-5\" style=\"background:#8ACE00;\">\n        <div class=\"text-black font-extrabold text-lg\">Type it. Generate it. Share it.<\/div>\n        <div class=\"mt-1 text-black\/80 text-sm\">\n          Whether you\u2019re making memes, refreshing your profile, launching a campaign, or just embracing your chaotic era\u2014\n          Brat Summer is only one text box away.\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Tiny footer note -->\n  <div class=\"mt-6 text-xs text-gray-500 text-center\">\n    Tip: This block is Tailwind-friendly and WordPress Custom HTML-ready (uses simple div-based layout + Font Awesome icons).\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Brat Text Generator: Personalize Your Text Style Easily<\/title>\n<meta name=\"description\" content=\"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oualator.com\/calculate\/brat-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brat Text Generator: Personalize Your Text Style Easily\" \/>\n<meta property=\"og:description\" content=\"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oualator.com\/calculate\/brat-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Oualator\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-25T02:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T12:41:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"599\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"mikarmiaura\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mikarmiaura\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/\"},\"author\":{\"name\":\"mikarmiaura\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#\\\/schema\\\/person\\\/4ea451aa69c0b6773dc729ab8e30a78a\"},\"headline\":\"Create Custom Text Designs with Brat Text Generator\",\"datePublished\":\"2026-02-25T02:58:00+00:00\",\"dateModified\":\"2026-02-26T12:41:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/\"},\"wordCount\":1006,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/brattext.png\",\"articleSection\":[\"Text\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/\",\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/\",\"name\":\"Brat Text Generator: Personalize Your Text Style Easily\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/brattext.png\",\"datePublished\":\"2026-02-25T02:58:00+00:00\",\"dateModified\":\"2026-02-26T12:41:18+00:00\",\"description\":\"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/brattext.png\",\"contentUrl\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/brattext.png\",\"width\":900,\"height\":599,\"caption\":\"brat text generator\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/brat-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Custom Text Designs with Brat Text Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#website\",\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/\",\"name\":\"Oualator\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#organization\",\"name\":\"Oualator\",\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-oualator-1.png\",\"contentUrl\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-oualator-1.png\",\"width\":500,\"height\":167,\"caption\":\"Oualator\"},\"image\":{\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/#\\\/schema\\\/person\\\/4ea451aa69c0b6773dc729ab8e30a78a\",\"name\":\"mikarmiaura\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g\",\"caption\":\"mikarmiaura\"},\"sameAs\":[\"https:\\\/\\\/oualator.com\\\/calculate\"],\"url\":\"https:\\\/\\\/oualator.com\\\/calculate\\\/author\\\/mikarmiaura\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Brat Text Generator: Personalize Your Text Style Easily","description":"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!","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:\/\/oualator.com\/calculate\/brat-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Brat Text Generator: Personalize Your Text Style Easily","og_description":"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!","og_url":"https:\/\/oualator.com\/calculate\/brat-text-generator\/","og_site_name":"Oualator","article_published_time":"2026-02-25T02:58:00+00:00","article_modified_time":"2026-02-26T12:41:18+00:00","og_image":[{"width":900,"height":599,"url":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png","type":"image\/png"}],"author":"mikarmiaura","twitter_card":"summary_large_image","twitter_misc":{"Written by":"mikarmiaura","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#article","isPartOf":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/"},"author":{"name":"mikarmiaura","@id":"https:\/\/oualator.com\/calculate\/#\/schema\/person\/4ea451aa69c0b6773dc729ab8e30a78a"},"headline":"Create Custom Text Designs with Brat Text Generator","datePublished":"2026-02-25T02:58:00+00:00","dateModified":"2026-02-26T12:41:18+00:00","mainEntityOfPage":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/"},"wordCount":1006,"commentCount":0,"publisher":{"@id":"https:\/\/oualator.com\/calculate\/#organization"},"image":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png","articleSection":["Text"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/oualator.com\/calculate\/brat-text-generator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/","url":"https:\/\/oualator.com\/calculate\/brat-text-generator\/","name":"Brat Text Generator: Personalize Your Text Style Easily","isPartOf":{"@id":"https:\/\/oualator.com\/calculate\/#website"},"primaryImageOfPage":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#primaryimage"},"image":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png","datePublished":"2026-02-25T02:58:00+00:00","dateModified":"2026-02-26T12:41:18+00:00","description":"Easily customize text color, size, and styles with the Brat Text Generator. Create personalized designs in just a few clicks!","breadcrumb":{"@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oualator.com\/calculate\/brat-text-generator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#primaryimage","url":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png","contentUrl":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/06\/brattext.png","width":900,"height":599,"caption":"brat text generator"},{"@type":"BreadcrumbList","@id":"https:\/\/oualator.com\/calculate\/brat-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oualator.com\/calculate\/"},{"@type":"ListItem","position":2,"name":"Create Custom Text Designs with Brat Text Generator"}]},{"@type":"WebSite","@id":"https:\/\/oualator.com\/calculate\/#website","url":"https:\/\/oualator.com\/calculate\/","name":"Oualator","description":"","publisher":{"@id":"https:\/\/oualator.com\/calculate\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oualator.com\/calculate\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/oualator.com\/calculate\/#organization","name":"Oualator","url":"https:\/\/oualator.com\/calculate\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oualator.com\/calculate\/#\/schema\/logo\/image\/","url":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/03\/cropped-oualator-1.png","contentUrl":"https:\/\/oualator.com\/calculate\/wp-content\/uploads\/2025\/03\/cropped-oualator-1.png","width":500,"height":167,"caption":"Oualator"},"image":{"@id":"https:\/\/oualator.com\/calculate\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/oualator.com\/calculate\/#\/schema\/person\/4ea451aa69c0b6773dc729ab8e30a78a","name":"mikarmiaura","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70d88366569bf8d9508ed6385a52290c21d112d7f9f8e8ba174309f9cd69e484?s=96&d=mm&r=g","caption":"mikarmiaura"},"sameAs":["https:\/\/oualator.com\/calculate"],"url":"https:\/\/oualator.com\/calculate\/author\/mikarmiaura\/"}]}},"_links":{"self":[{"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":5,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":730,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/posts\/286\/revisions\/730"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/media\/284"}],"wp:attachment":[{"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oualator.com\/calculate\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}