---
layout: default
title: Watermark PDF - Add Watermarks to PDF Documents
description: Add text or image watermarks to your PDF documents with custom positioning and transparency.
permalink: /playground/tools/watermark-pdf/
---

<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>Watermark PDF</h1>
        <p class="tool-description">Add text or image watermarks to PDF documents</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 a PDF or drag it here</div>
            <div class="drop-zone-hint">Single PDF file only</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf">

        <div id="settingsContainer" style="display: none; margin-top: 2rem;">
            <h3>Watermark Settings</h3>

            <div style="background: var(--tool-bg-light); border: 1px solid var(--tool-border); border-radius: 8px; padding: 1.5rem; margin-top: 1rem;">

                <div class="input-group">
                    <label style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Watermark Type:</label>
                    <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="radio" name="watermarkType" value="text" checked style="margin-right: 0.5rem;">
                            <span>📝 Text</span>
                        </label>
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="radio" name="watermarkType" value="image" style="margin-right: 0.5rem;">
                            <span>🖼️ Image</span>
                        </label>
                    </div>
                </div>

                <div id="textWatermarkSettings">
                    <div class="input-group">
                        <label for="watermarkText" style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Watermark Text:</label>
                        <input type="text" id="watermarkText" placeholder="CONFIDENTIAL" value="CONFIDENTIAL"
                               style="width: 100%; padding: 0.75rem; border: 1px solid var(--tool-border); border-radius: 4px; font-size: 1rem;">
                    </div>

                    <div class="grid-2-cols" style="margin-top: 1rem;">
                        <div class="input-group">
                            <label for="fontSize" style="font-weight: 600;">Font Size: <span id="fontSizeValue">48</span>pt</label>
                            <input type="range" id="fontSize" min="12" max="120" value="48" style="width: 100%;">
                        </div>

                        <div class="input-group">
                            <label for="textColor" style="font-weight: 600;">Text Color:</label>
                            <input type="color" id="textColor" value="#ff0000" style="width: 100%; height: 38px; cursor: pointer;">
                        </div>
                    </div>

                    <div class="input-group" style="margin-top: 1rem;">
                        <label for="rotation" style="font-weight: 600;">Rotation: <span id="rotationValue">-45</span>°</label>
                        <input type="range" id="rotation" min="-180" max="180" value="-45" style="width: 100%;">
                    </div>
                </div>

                <div id="imageWatermarkSettings" style="display: none;">
                    <div class="input-group">
                        <label for="watermarkImage" style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Select Image:</label>
                        <input type="file" id="watermarkImage" accept="image/*"
                               style="width: 100%; padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    </div>

                    <div class="input-group" style="margin-top: 1rem;">
                        <label for="imageScale" style="font-weight: 600;">Image Scale: <span id="imageScaleValue">50</span>%</label>
                        <input type="range" id="imageScale" min="10" max="200" value="50" style="width: 100%;">
                    </div>
                </div>

                <div class="input-group" style="margin-top: 1.5rem;">
                    <label for="opacity" style="font-weight: 600;">Opacity: <span id="opacityValue">30</span>%</label>
                    <input type="range" id="opacity" min="5" max="100" value="30" style="width: 100%;">
                </div>

                <div class="input-group" style="margin-top: 1.5rem;">
                    <label style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Position:</label>
                    <div class="grid-3-cols">
                        <button class="btn btn-secondary position-btn" data-position="top-left">↖ Top Left</button>
                        <button class="btn btn-secondary position-btn" data-position="top-center">↑ Top Center</button>
                        <button class="btn btn-secondary position-btn" data-position="top-right">↗ Top Right</button>
                        <button class="btn btn-secondary position-btn" data-position="middle-left">← Left</button>
                        <button class="btn btn-secondary position-btn active" data-position="center">⊙ Center</button>
                        <button class="btn btn-secondary position-btn" data-position="middle-right">→ Right</button>
                        <button class="btn btn-secondary position-btn" data-position="bottom-left">↙ Bottom Left</button>
                        <button class="btn btn-secondary position-btn" data-position="bottom-center">↓ Bottom</button>
                        <button class="btn btn-secondary position-btn" data-position="bottom-right">↘ Bottom Right</button>
                    </div>
                </div>

                <div class="input-group" style="margin-top: 1.5rem;">
                    <label style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Apply To:</label>
                    <div style="display: flex; gap: 1rem;">
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="radio" name="applyTo" value="all" checked style="margin-right: 0.5rem;">
                            <span>All Pages</span>
                        </label>
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="radio" name="applyTo" value="first" style="margin-right: 0.5rem;">
                            <span>First Page Only</span>
                        </label>
                        <label style="display: flex; align-items: center; cursor: pointer;">
                            <input type="radio" name="applyTo" value="custom" style="margin-right: 0.5rem;">
                            <span>Custom Range</span>
                        </label>
                    </div>
                    <input type="text" id="customPages" placeholder="e.g., 1-3, 5, 7-9" disabled
                           style="width: 100%; margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                </div>
            </div>
        </div>

        <div id="previewContainer" style="display: none; margin-top: 2rem;">
            <h3>Preview (Page 1)</h3>
            <div style="text-align: center; margin-top: 1rem;">
                <canvas id="previewCanvas" style="max-width: 100%; border: 2px solid var(--tool-border); border-radius: 4px;"></canvas>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="previewBtn" class="btn btn-secondary" style="display: none;">
                Update Preview
            </button>
            <button id="applyBtn" class="btn btn-primary" style="display: none;">
                Apply Watermark & Download
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Applying watermark...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Text or image watermarks</li>
            <li>9 preset positions + custom placement</li>
            <li>Adjustable opacity and rotation</li>
            <li>Apply to all pages or specific ranges</li>
            <li>Real-time preview</li>
            <li>Custom font size and color</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>

        <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
            <strong>Use Cases:</strong> Add "CONFIDENTIAL", "DRAFT", "COPY", company logos, or copyright notices to your PDFs.
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"
        integrity="sha384-6RsW+O0eLDetuZS+cLGe0xW5GuwTWcIcCcJg/LCT6S3qLKBXXXxLYzIvEd3KNQxw"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"
        integrity="sha384-TzqKflHZaLYKpKjLG7g3w8zkFSGdTqZB1wXU2/mKXPBqC8AE4V5GV76KxGqKGKGj"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>