---
layout: default
title: Meme Generator - Create Memes Online
description: Create memes with top and bottom text. Add custom text, fonts, and styling.
permalink: /playground/tools/meme-generator/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Meme Generator</h1>
        <p class="tool-description">Create memes with classic top/bottom text</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">😂</div>
            <div class="drop-zone-text">Click to select an image or drag it here</div>
            <div class="drop-zone-hint">Your meme template image</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*">

        <div id="editorContainer" style="display: none; margin-top: 2rem;">
            <h3>Meme Editor</h3>
            <div style="text-align: center; margin-top: 1rem;">
                <canvas id="canvas" style="border: 2px solid var(--tool-border); max-width: 100%;"></canvas>
            </div>
        </div>

        <div id="memeControls" style="display: none; margin-top: 2rem;">
            <h3>Meme Text</h3>

            <div class="input-group">
                <label for="topText">Top Text:</label>
                <input type="text" id="topText" placeholder="TOP TEXT"
                       style="width: 100%; padding: 0.75rem; border: 1px solid var(--tool-border); border-radius: 4px; text-transform: uppercase; font-weight: bold;">
            </div>

            <div class="input-group">
                <label for="bottomText">Bottom Text:</label>
                <input type="text" id="bottomText" placeholder="BOTTOM TEXT"
                       style="width: 100%; padding: 0.75rem; border: 1px solid var(--tool-border); border-radius: 4px; text-transform: uppercase; font-weight: bold;">
            </div>

            <h3 style="margin-top: 2rem;">Text Style</h3>

            <div class="input-group">
                <label for="fontFamily">Font:</label>
                <select id="fontFamily" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 100%; max-width: 300px; font-weight: 600;">
                    <option value="Impact" selected>Impact</option>
                    <option value="Arial Black">Arial Black</option>
                    <option value="Comic Sans MS">Comic Sans MS</option>
                    <option value="Times New Roman">Times New Roman</option>
                    <option value="Courier New">Courier New</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Verdana">Verdana</option>
                    <option value="Trebuchet MS">Trebuchet MS</option>
                </select>
            </div>

            <div class="input-group">
                <label for="fontSize">Font Size: <span id="fontSizeValue">60</span>px</label>
                <input type="range" id="fontSize" min="20" max="150" value="60"
                       style="width: 100%; max-width: 300px;">
            </div>

            <div class="input-group">
                <label for="textColor">Text Color:</label>
                <input type="color" id="textColor" value="#ffffff"
                       style="padding: 0.25rem; border: 1px solid var(--tool-border); border-radius: 4px; cursor: pointer;">
            </div>

            <div class="input-group">
                <label for="strokeColor">Stroke Color:</label>
                <input type="color" id="strokeColor" value="#000000"
                       style="padding: 0.25rem; border: 1px solid var(--tool-border); border-radius: 4px; cursor: pointer;">
            </div>

            <div class="input-group">
                <label for="strokeWidth">Outline Width: <span id="strokeWidthValue">4</span>px</label>
                <input type="range" id="strokeWidth" min="0" max="10" value="4"
                       style="width: 100%; max-width: 300px;">
            </div>

            <div style="margin-top: 1rem; padding: 0.75rem; border-radius: 8px; background: #fff3cd; border: 1px solid #ffc107; font-size: 0.9rem;">
                <strong>💡 Tip:</strong> Classic memes use <strong>Impact</strong> font with <strong>white text</strong> and <strong>black stroke</strong>!
            </div>

            <div class="input-group">
                <label>
                    <input type="checkbox" id="allCaps" checked>
                    ALL CAPS (Classic Meme Style)
                </label>
            </div>

            <div class="input-group">
                <label for="outputFormat">Output Format:</label>
                <select id="outputFormat" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="png">PNG (Best Quality)</option>
                    <option value="jpeg">JPEG (Smaller Size)</option>
                    <option value="webp">WebP</option>
                </select>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="downloadBtn" class="btn btn-primary" style="display: none;">
                Download Meme
            </button>
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Classic top/bottom text format</li>
            <li>ALL CAPS meme style</li>
            <li>Customizable font size</li>
            <li>Custom text and outline colors</li>
            <li>Adjustable stroke width</li>
            <li>Real-time preview</li>
            <li>Multiple output formats</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"
        integrity="sha384-NMLy6RgHw0defPJZoaU3sxvjmN+Xxp+o6KXGzJ/1vEg5mO1/vQtb5sU5M8YWXnRn"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>