PageSourceSearch

https://obsmaskgenerator.com/

html obsmaskgenerator.com collected 2026-10-04 21:03:25 UTC 74,474 bytes, 1,061 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
6
7    <!-- Placeit / Impact site verification -->
8    <meta name="impact-site-verification" value="bf63fb2d-1c18-43bd-840c-5739e4d23cd2">
9
10    <!-- Primary Meta Tags -->
11    <meta charset="UTF-8">
12    <meta name="viewport" content="width=device-width, initial-scale=1.0">
13    <meta http-equiv="X-UA-Compatible" content="IE=edge">
14    <title>OBS Circle Mask PNG Generator - Free Download | Rounded Corners, Hexagon Masks</title>
15    <meta name="title" content="OBS Circle Mask PNG Generator - Free Download | Rounded Corners, Hexagon Masks">
16    <meta name="description"
17        content="Make your webcam circular in OBS — free. Generate and download circle, rounded, or hexagon webcam masks for OBS Studio &amp; Streamlabs. No plugin needed. Apply in 60 seconds.">
18    <meta name="keywords"
19        content="obs circle mask png, download obs mask png, obs image mask download, obs image mask download free, image mask obs, obs mask plugin, OBS mask generator, OBS rounded corners, webcam mask, OBS circle camera, OBS hexagon mask, free mask generator, OBS Studio mask, twitch webcam mask, obs image mask, camera frame OBS, circular webcam OBS, round webcam OBS, how to make webcam circle OBS, OBS circle webcam no plugin, OBS facecam circle, OBS webcam shape, webcam circle overlay free, free circle webcam overlay download, OBS rounded corners webcam, how to crop webcam circle OBS, custom webcam shape OBS, OBS hexagon webcam, OBS squircle webcam, Streamlabs webcam mask, webcam mask generator free">
20    <meta name="author" content="Nikhil Agarwal">
21    <meta name="robots" content="index, follow">
22    <meta name="language" content="English">
23    <meta name="revisit-after" content="7 days">
24    <link rel="canonical" href="https://obsmaskgenerator.com/">
25
26    <!-- Open Graph / Facebook -->
27    <meta property="og:type" content="website">
28    <meta property="og:url" content="https://obsmaskgenerator.com/">
29    <meta property="og:title" content="Free OBS Circle Mask PNG Download - No Plugin Needed">
30    <meta property="og:description"
31        content="Download free OBS image masks - circles, rounded rectangles, hexagons. No plugin required. Works with OBS Studio & Streamlabs.">
32    <meta property="og:image" content="https://obsmaskgenerator.com/og-image.png">
33    <meta property="og:site_name" content="OBS Image Mask Generator">
34
35    <!-- Twitter -->
36    <meta property="twitter:card" content="summary_large_image">
37    <meta property="twitter:url" content="https://obsmaskgenerator.com/">
38    <meta property="twitter:title" content="Free OBS Circle Mask PNG Download - No Plugin Needed">
39    <meta property="twitter:description"
40        content="Download free OBS image masks - circles, rounded rectangles, hexagons. No plugin required. Works with OBS Studio & Streamlabs.">
41    <meta property="twitter:image" content="https://obsmaskgenerator.com/og-image.png">
42
43    <!-- Structured Data - JSON-LD -->
44    
44<script type="application/ld+json">
45    {
46        "@context": "https://schema.org",
47        "@type": ["WebApplication", "SoftwareApplication"],
48        "name": "OBS Image Mask Generator - Free Download",
49        "alternateName": ["OBS Mask Generator", "Image Mask OBS", "OBS Mask Plugin Alternative"],
50        "url": "https://obsmaskgenerator.com",
51        "description": "Free OBS image mask download tool. Create and download custom webcam masks for OBS Studio and Streamlabs - circles, rounded rectangles, hexagons. No plugin required. Better than OBS mask plugins.",
52        "applicationCategory": "DesignApplication",
53        "operatingSystem": "Any",
54        "offers": {
55            "@type": "Offer",
56            "price": "0",
57            "priceCurrency": "USD"
58        },
59        "featureList": [
60            "Free OBS image mask download",
61            "Circle webcam masks",
62            "Rounded rectangle masks",
63            "Hexagon masks",
64            "No plugin installation required",
65            "Custom polygon shapes",
66            "Adjustable corner radius",
67            "Feathering effects",
68            "Border overlay generator",
69            "One-click PNG download"
70        ]
71    }
72    </script>
72
73
74    <!-- FAQ Structured Data -->
75    
75<script type="application/ld+json">
76    {
77        "@context": "https://schema.org",
78        "@type": "FAQPage",
79        "mainEntity": [
80            {
81                "@type": "Question",
82                "name": "Where can I download free OBS image masks?",
83                "acceptedAnswer": {
84                    "@type": "Answer",
85                    "text": "OBS Mask Generator offers free OBS image mask downloads. Simply select a preset (circle, rounded rectangle, hexagon), customize the size and shape, then click Download Mask (PNG). It's completely free with no signup required."
86                }
87            },
88            {
89                "@type": "Question",
90                "name": "Do I need an OBS mask plugin?",
91                "acceptedAnswer": {
92                    "@type": "Answer",
93                    "text": "No, you don't need any OBS mask plugin. OBS Studio has built-in Image Mask/Blend filter support. Simply download a PNG mask from our generator and apply it using OBS's native filters - no plugins required."
94                }
95            },
96            {
97                "@type": "Question",
98                "name": "How do I add an image mask to OBS?",
99                "acceptedAnswer": {
100                    "@type": "Answer",
101                    "text": "Download your image mask PNG, then in OBS right-click your webcam source, select Filters, click the + button, choose Image Mask/Blend, and browse to your downloaded mask file. The mask applies instantly."
102                }
103            },
104            {
105                "@type": "Question",
106                "name": "How do I add rounded corners to my webcam in OBS?",
107                "acceptedAnswer": {
108                    "@type": "Answer",
109                    "text": "Use OBS Mask Generator to create a rounded rectangle mask PNG, then in OBS right-click your webcam source, go to Filters, add Image Mask/Blend, and select your downloaded mask file."
110                }
111            },
112            {
113                "@type": "Question",
114                "name": "Is OBS image mask download free?",
115                "acceptedAnswer": {
116                    "@type": "Answer",
117                    "text": "Yes, OBS Mask Generator provides completely free image mask downloads. Generate unlimited masks for circles, rounded rectangles, hexagons, and more - no signup, no watermarks, no cost."
118                }
119            },
120            {
121                "@type": "Question",
122                "name": "How do I make my webcam circular in OBS?",
123                "acceptedAnswer": {
124                    "@type": "Answer",
125                    "text": "Download a free circle mask PNG from OBS Mask Generator, then in OBS right-click your webcam source, select Filters, add Image Mask/Blend, and browse to the PNG. Your webcam is now a perfect circle. No plugin required — works with OBS Studio and Streamlabs OBS."
126                }
127            },
128            {
129                "@type": "Question",
130                "name": "How do I get a circular webcam overlay for OBS for free?",
131                "acceptedAnswer": {
132                    "@type": "Answer",
133                    "text": "Use OBS Mask Generator to generate and download a free circle mask PNG. Apply it in OBS using the built-in Image Mask/Blend filter. This gives you a circular webcam shape without any overlay software or plugins."
134                }
135            },
136            {
137                "@type": "Question",
138                "name": "Can I make my webcam a custom shape in OBS?",
139                "acceptedAnswer": {
140                    "@type": "Answer",
141                    "text": "Yes. OBS supports any custom shape through the Image Mask/Blend filter. OBS Mask Generator lets you create circle, hexagon, squircle, rounded rectangle, triangle, and star masks — all free to download as PNG with no signup required."
142                }
143            },
144            {
145                "@type": "Question",
146                "name": "Does OBS circle webcam mask work with Streamlabs?",
147                "acceptedAnswer": {
148                    "@type": "Answer",
149                    "text": "Yes. Streamlabs OBS supports the same Image Mask/Blend filter as OBS Studio. Download your circle or custom shape mask PNG from OBS Mask Generator and apply it the same way — right-click your source, open Filters, add Image Mask/Blend."
150                }
151            },
152            {
153                "@type": "Question",
154                "name": "Is this tool better than OBS masking plugins?",
155                "acceptedAnswer": {
156                    "@type": "Answer",
157                    "text": "Yes, using native OBS filters with these PNG masks is more stable, uses less CPU, and requires no external third-party software or plugins."
158                }
159            }
160        ]
161    }
162    </script>
162
163
164    <!-- Styles -->
165    <link rel="stylesheet" href="style.css">
166    <link rel="stylesheet" href="assets/css/common.css">
167    <link rel="preconnect" href="https://fonts.googleapis.com">
168    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
169    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
170    
170<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4560264570048889" crossorigin="anonymous"></script>
170
171</head>
172
173<body>
174    <!-- Global Banner (Promotes Video Background Remover) -->
175
176    <!-- Cookie Consent Banner will be handled by AdSense -->
177
178    <div class="app-container">
179        <!-- Top Navigation -->
180        <nav class="top-nav" aria-label="Main Navigation">
181            <div class="nav-container">
182                <a href="/" class="nav-logo" style="color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1rem;">OBS Tools</a>
183                <ul class="nav-links">
184                    <li><a href="/blog/">Blog & Guides</a></li>
185                    <li><a href="/about.html">About</a></li>
186                    <li><a href="/contact.html">Contact</a></li>
187                </ul>
188            </div>
189        </nav>
190
191        <!-- Header -->
192        <header class="header">
193            <div class="logo">
194                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
195                    <rect width="32" height="32" rx="8" fill="url(#logo-gradient)" />
196                    <path d="M8 16C8 11.5817 11.5817 8 16 8C20.4183 8 24 11.5817 24 16C24 20.4183 20.4183 24 16 24"
197                        stroke="white" stroke-width="2.5" stroke-linecap="round" />
198                    <circle cx="16" cy="16" r="4" fill="white" />
199                    <defs>
200                        <linearGradient id="logo-gradient" x1="0" y1="0" x2="32" y2="32">
201                            <stop offset="0" stop-color="#9146FF" />
202                            <stop offset="1" stop-color="#6441A5" />
203                        </linearGradient>
204                    </defs>
205                </svg>
206                <h1>OBS Circle Mask PNG Generator - Free Download</h1>
207            </div>
208            <p class="tagline">Make your webcam circular, rounded, or any shape in OBS — download a free mask PNG and apply it in 60 seconds. No plugin needed.</p>
209        </header>
210
211        <!-- Quick Presets Bar -->
212        <section class="presets-bar" aria-label="Free OBS webcam mask presets — circle, rounded corners, hexagon, and more">
213            <h2 class="section-title">Free OBS Image Mask Download - Quick Presets</h2>
214            <div class="presets-grid">
215                <button class="preset-card" data-preset="classic" title="16:9 Rounded Rectangle" aria-label="16:9 Rounded Rectangle">
216                    <span class="preset-icon preset-rounded-rect"></span>
217                    <span>Classic</span>
218                </button>
219                <button class="preset-card" data-preset="circle" title="Perfect Circle" aria-label="Perfect Circle">
220                    <span class="preset-icon preset-circle"></span>
221                    <span>Circle</span>
222                </button>
223                <button class="preset-card" data-preset="bubble" title="Square with Heavy Rounding" aria-label="Square with Heavy Rounding">
224                    <span class="preset-icon preset-bubble"></span>
225                    <span>Bubble</span>
226                </button>
227                <button class="preset-card" data-preset="hex" title="Hexagon" aria-label="Hexagon">
228                    <span class="preset-icon preset-hex"></span>
229                    <span>Hex</span>
230                </button>
231                <button class="preset-card" data-preset="vertical" title="9:16 Vertical/Shorts" aria-label="9:16 Vertical/Shorts">
232                    <span class="preset-icon preset-vertical"></span>
233                    <span>Vertical</span>
234                </button>
235                <button class="preset-card" data-preset="triangle" title="Triangle" aria-label="Triangle">
236                    <span class="preset-icon preset-triangle"></span>
237                    <span>Triangle</span>
238                </button>
239            </div>
240        </section>
241
242        <!-- Main Editor Area -->
243        <main class="editor">
244            <!-- Left Panel: Controls -->
245            <aside class="controls-panel">
246                <form id="controls-form" aria-label="Mask Settings" onsubmit="event.preventDefault();">
247                <!-- Canvas Size -->
248                <fieldset class="control-group">
249                    <legend class="control-title">
250                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
251                            stroke-width="2" aria-hidden="true">
252                            <rect x="3" y="3" width="18" height="18" rx="2" />
253                            <path d="M3 9h18M9 21V9" />
254                        </svg>
255                        Canvas Size
256                    </legend>
257                    <div class="size-inputs">
258                        <div class="input-group">
259                            <label for="canvas-width">Width</label>
260                            <input type="number" id="canvas-width" value="1920" min="100" max="4096">
261                            <span class="unit">px</span>
262                        </div>
263                        <div class="input-group">
264                            <label for="canvas-height">Height</label>
265                            <input type="number" id="canvas-height" value="1080" min="100" max="4096">
266                            <span class="unit">px</span>
267                        </div>
268                    </div>
269                    <div class="aspect-buttons">
270                        <button type="button" class="aspect-btn active" data-ratio="16:9" aria-label="16:9 Aspect Ratio">16:9</button>
271                        <button type="button" class="aspect-btn" data-ratio="4:3" aria-label="4:3 Aspect Ratio">4:3</button>
272                        <button type="button" class="aspect-btn" data-ratio="1:1" aria-label="1:1 Aspect Ratio">1:1</button>
273                        <button type="button" class="aspect-btn" data-ratio="9:16" aria-label="9:16 Aspect Ratio">9:16</button>
274                        <button type="button" class="aspect-btn" data-ratio="free" aria-label="Free Aspect Ratio">Free</button>
275                    </div>
276                </fieldset>
277
278                <!-- Shape Selection -->
279                <fieldset class="control-group">
280                    <legend class="control-title">
281                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
282                            stroke-width="2" aria-hidden="true">
283                            <circle cx="12" cy="12" r="10" />
284                        </svg>
285                        Shape
286                    </legend>
287                    <div class="shape-buttons">
288                        <button type="button" class="shape-btn active" data-shape="rectangle">
289                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
290                                <rect x="3" y="5" width="18" height="14" rx="2" />
291                            </svg>
292                            Rectangle
293                        </button>
294                        <button type="button" class="shape-btn" data-shape="ellipse">
295                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
296                                <ellipse cx="12" cy="12" rx="10" ry="7" />
297                            </svg>
298                            Ellipse
299                        </button>
300                        <button type="button" class="shape-btn" data-shape="squircle" title="Squircle / Superellipse">
301                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
302                                <path d="M12,2 C18,2 22,6 22,12 C22,18 18,22 12,22 C6,22 2,18 2,12 C2,6 6,2 12,2 Z" />
303                            </svg>
304                            Squircle
305                        </button>
306                        <button type="button" class="shape-btn" data-shape="polygon">
307                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
308                                <polygon points="12,2 22,20 2,20" />
309                            </svg>
310                            Polygon
311                        </button>
312                        <button type="button" class="shape-btn" data-shape="star">
313                            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
314                                <polygon points="12,2 15,9 22,9 16,14 18,21 12,17 6,21 8,14 2,9 9,9" />
315                            </svg>
316                            Star
317                        </button>
318                    </div>
319                </fieldset>
320
321                <!-- Corner Radius (for Rectangle) -->
322                <fieldset class="control-group" id="corner-radius-group">
323                    <legend class="control-title">
324                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
325                            stroke-width="2" aria-hidden="true">
326                            <path d="M3 12a9 9 0 0 1 9-9" />
327                        </svg>
328                        Corner Radius
329                    </legend>
330                    <div class="toggle-group" style="margin-bottom: 8px;">
331                        <label class="toggle-label" for="independent-corners">
332                            <input type="checkbox" id="independent-corners">
333                            <span class="toggle-switch"></span>
334                            Independent Corners
335                        </label>
336                    </div>
337                    <div id="single-corner-wrap">
338                        <div class="slider-group">
339                            <input type="range" id="corner-radius" min="0" max="50" value="10" aria-label="Corner Radius Slider">
340                            <div class="slider-value">
341                                <input type="number" id="corner-radius-value" value="10" min="0" max="50" aria-label="Corner Radius Value">
342                                <span>%</span>
343                            </div>
344                        </div>
345                    </div>
346                    <div id="multi-corner-wrap" class="hidden">
347                        <div class="slider-group" style="margin-bottom:4px;">
348                            <label>Top-Left</label>
349                            <input type="range" id="corner-tl" min="0" max="50" value="10">
350                            <div class="slider-value"><input type="number" id="corner-tl-value" value="10" min="0" max="50"><span>%</span></div>
351                        </div>
352                        <div class="slider-group" style="margin-bottom:4px;">
353                            <label>Top-Right</label>
354                            <input type="range" id="corner-tr" min="0" max="50" value="10">
355                            <div class="slider-value"><input type="number" id="corner-tr-value" value="10" min="0" max="50"><span>%</span></div>
356                        </div>
357                        <div class="slider-group" style="margin-bottom:4px;">
358                            <label>Bottom-Right</label>
359                            <input type="range" id="corner-br" min="0" max="50" value="10">
360                            <div class="slider-value"><input type="number" id="corner-br-value" value="10" min="0" max="50"><span>%</span></div>
361                        </div>
362                        <div class="slider-group">
363                            <label>Bottom-Left</label>
364                            <input type="range" id="corner-bl" min="0" max="50" value="10">
365                            <div class="slider-value"><input type="number" id="corner-bl-value" value="10" min="0" max="50"><span>%</span></div>
366                        </div>
367                    </div>
368                </fieldset>
369
370                <!-- Polygon Sides (for Polygon) -->
371                <fieldset class="control-group hidden" id="polygon-sides-group">
372                    <legend class="control-title">
373                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
374                            stroke-width="2" aria-hidden="true">
375                            <polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5" />
376                        </svg>
377                        Polygon Sides
378                    </legend>
379                    <div class="slider-group">
380                        <input type="range" id="polygon-sides" min="3" max="12" value="6" aria-label="Polygon Sides Slider">
381                        <div class="slider-value">
382                            <input type="number" id="polygon-sides-value" value="6" min="3" max="12" aria-label="Polygon Sides Value">
383                            <span>sides</span>
384                        </div>
385                    </div>
386                </fieldset>
387
388                <!-- Squircle Curvature -->
389                <fieldset class="control-group hidden" id="squircle-curvature-group">
390                    <legend class="control-title">
391                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
392                            <path d="M3 12 C3 3 12 3 21 12 C21 21 12 21 3 12 Z" />
393                        </svg>
394                        Squircle Curvature
395                    </legend>
396                    <div class="slider-group">
397                        <input type="range" id="squircle-curvature" min="1" max="10" step="0.1" value="3.5" aria-label="Curvature Slider">
398                        <div class="slider-value">
399                            <input type="number" id="squircle-curvature-value" value="3.5" min="1" max="10" step="0.1" aria-label="Curvature Value">
400                            <span>n</span>
401                        </div>
402                    </div>
403                </fieldset>
404
405                <!-- Star Controls -->
406                <fieldset class="control-group hidden" id="star-controls-group">
407                    <legend class="control-title">
408                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
409                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
410                        </svg>
411                        Star Shape
412                    </legend>
413                    <div class="slider-group" style="margin-bottom:8px;">
414                        <label>Points</label>
415                        <input type="range" id="star-points" min="3" max="20" value="5">
416                        <div class="slider-value"><input type="number" id="star-points-value" value="5" min="3" max="20"></div>
417                    </div>
418                    <div class="slider-group">
419                        <label>Inner Depth</label>
420                        <input type="range" id="star-depth" min="10" max="90" value="50">
421                        <div class="slider-value"><input type="number" id="star-depth-value" value="50" min="10" max="90"><span>%</span></div>
422                    </div>
423                </fieldset>
424
425                <!-- Rotation -->
426                <fieldset class="control-group">
427                    <legend class="control-title">
428                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
429                            stroke-width="2" aria-hidden="true">
430                            <path d="M21 12a9 9 0 1 1-9-9" />
431                            <polyline points="21 3 21 9 15 9" />
432                        </svg>
433                        Rotation
434                    </legend>
435                    <div class="slider-group">
436                        <input type="range" id="rotation" min="0" max="360" value="0" aria-label="Rotation Slider">
437                        <div class="slider-value">
438                            <input type="number" id="rotation-value" value="0" min="0" max="360" aria-label="Rotation Value">
439                            <span>&deg;</span>
440                        </div>
441                    </div>
442                </fieldset>
443
444                <!-- Effects -->
445                <fieldset class="control-group">
446                    <legend class="control-title">
447                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
448                            stroke-width="2" aria-hidden="true">
449                            <circle cx="12" cy="12" r="3" />
450                            <path
451                                d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83" />
452                        </svg>
453                        Effects
454                    </legend>
455                    <div class="slider-group">
456                        <label for="feathering">Feathering (Soft Edge)</label>
457                        <input type="range" id="feathering" min="0" max="50" value="0" aria-label="Feathering Slider">
458                        <div class="slider-value">
459                            <input type="number" id="feathering-value" value="0" min="0" max="50" aria-label="Feathering Value">
460                            <span>px</span>
461                        </div>
462                    </div>
463                    <div class="toggle-group">
464                        <label class="toggle-label" for="invert-mode">
465                            <input type="checkbox" id="invert-mode">
466                            <span class="toggle-switch"></span>
467                            Invert Mask (Black on White)
468                        </label>
469                    </div>
470                </fieldset>
471
472                <!-- Border Generator -->
473                <fieldset class="control-group">
474                    <legend class="control-title">
475                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
476                            stroke-width="2" aria-hidden="true">
477                            <rect x="3" y="3" width="18" height="18" rx="2" />
478                        </svg>
479                        Border Generator
480                    </legend>
481                    <div class="toggle-group">
482                        <label class="toggle-label" for="enable-border">
483                            <input type="checkbox" id="enable-border">
484                            <span class="toggle-switch"></span>
485                            Generate Border Frame
486                        </label>
487                    </div>
488                    <div class="border-controls hidden" id="border-controls">
489                        <div class="color-input">
490                            <label for="border-color">Border Color</label>
491                            <input type="color" id="border-color" value="#9146ff">
492                        </div>
493                        <div class="slider-group">
494                            <label for="border-thickness">Thickness</label>
495                            <input type="range" id="border-thickness" min="1" max="50" value="4" aria-label="Border Thickness Slider">
496                            <div class="slider-value">
497                                <input type="number" id="border-thickness-value" value="4" min="1" max="50" aria-label="Border Thickness Value">
498                                <span>px</span>
499                            </div>
500                        </div>
501                    </div>
502                </fieldset>
503                </form>
504            </aside>
505
506            <!-- Right Panel: Preview -->
507            <section class="preview-panel">
508                <div class="preview-header">
509                    <h2 class="sr-only">Mask Preview</h2>
510                    <span class="preview-label">PREVIEW</span>
511                    <button id="webcam-toggle" class="webcam-btn" title="Test with your webcam" style="background: #9146ff; color: #fff; border: none; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-left: 12px;">📷 Test with Webcam</button>
512                    <span class="dimension-badge" id="dimension-badge">1920 × 1080 px</span>
513                </div>
514                <div class="nav-links">
515                    <a href="/">Home</a>
516                    <a href="/obs-background-removal/">BG Removal</a>
517                    <a href="/webcam-background-blur/">BG Blur</a>
518                    <a href="/settings-generator/">Settings Generator</a>
519                    <a href="/bitrate-calculator/">Bitrate Calc</a>
520                    <a href="/aspect-ratio-calculator/">Aspect Ratio</a>
521                    <a href="/hotkey-reference/">OBS Hotkeys</a>
522                    <a href="/can-i-stream/">Can I Stream?</a>
523                    <a href="/guides/">Guides</a>
524                </div>
525                <div class="canvas-container">
526                    <div class="canvas-wrapper" id="canvas-wrapper" style="position: relative; z-index: 1;">
527                        <video id="webcam-video" autoplay playsinline muted style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; transform: scaleX(-1); border-radius: 4px;"></video>
528                        <canvas id="preview-canvas" width="1920" height="1080" style="aspect-ratio: 16/9; width: 100%; height: auto; position: relative; z-index: 2;" aria-label="Mask Preview Canvas"></canvas>
529                    </div>
530                </div>
531                <div class="zoom-controls">
532                    <button type="button" class="zoom-btn active" id="zoom-fit" title="Fit to View" aria-label="Zoom Fit to View">
533                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
534                            stroke-width="2" aria-hidden="true">
535                            <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
536                        </svg>
537                        Fit
538                    </button>
539                    <button type="button" class="zoom-btn" id="zoom-100" title="100% (Actual Size)" aria-label="Zoom 100 Percent">
540                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
541                            stroke-width="2" aria-hidden="true">
542                            <circle cx="11" cy="11" r="8" />
543                            <path d="M21 21l-4.35-4.35" />
544                        </svg>
545                        100%
546                    </button>
547                </div>
548                <div class="download-actions">
549                    <button class="download-btn primary" id="download-mask">
550                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
551                            stroke-width="2">
552                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
553                            <polyline points="7 10 12 15 17 10" />
554                            <line x1="12" y1="15" x2="12" y2="3" />
555                        </svg>
556                        Download Image Mask (PNG)
557                    </button>
558                    <button class="download-btn secondary hidden" id="download-border">
559                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
560                            stroke-width="2">
561                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
562                            <polyline points="7 10 12 15 17 10" />
563                            <line x1="12" y1="15" x2="12" y2="3" />
564                        </svg>
565                        Download Border Overlay
566                    </button>
567                </div>
568
569                <div class="own3d-cta">
570                    <h3>Make your whole stream match</h3>
571                    <p>Your webcam mask looks great &mdash; now tie it together. OWN3D's premium overlay packages give you matching alerts, panels, screens &amp; more in one bundle.</p>
572                    <a href="https://www.own3d.tv/en/shop/stream-overlays/?deal=x7dk4" class="own3d-cta__btn" target="_blank" rel="sponsored nofollow noopener">Get My Overlay Pack &rarr;</a>
573                    <span class="own3d-cta__disclosure">Affiliate link &mdash; we may earn a commission at no extra cost to you.</span>
574                </div>
575                <!-- Engagement Feature Buttons -->
576                <div style="display: flex; gap: 0.6rem; margin-top: 0.75rem; flex-wrap: wrap;">
577                    <button id="sb-toggle-btn" style="flex: 1; min-width: 180px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; background: #1f1f23; border: 1px solid #9146ff; border-radius: 8px; color: #9146ff; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s;" onmouseover="this.style.background='rgba(145,70,255,0.12)'" onmouseout="this.style.background='#1f1f23'" aria-label="Open OBS Scene Builder">
578                        🎬 Preview in OBS Scene
579                    </button>
580                    <button id="pack-open-btn" style="flex: 1; min-width: 180px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; background: #1f1f23; border: 1px solid #00f593; border-radius: 8px; color: #00f593; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s;" onmouseover="this.style.background='rgba(0,245,147,0.08)'" onmouseout="this.style.background='#1f1f23'" aria-label="Open Stream Pack Generator">
581                        📦 Build a Stream Pack
582                    </button>
583                </div>
584                <!-- Social Share Buttons -->
585                <div class="share-buttons"
586                    style="display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: center;">
587                    <button type="button"
588                        onclick="window.open('https://twitter.com/intent/tweet?text=Just%20created%20a%20custom%20webcam%20mask%20with%20this%20free%20tool!%20%F0%9F%8E%A5&url=https://
588obsmaskgenerator.com', '_blank')"
589                        style="background: #1da1f2; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem;"
590                        aria-label="Share on Twitter">
591                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
592                            <path
593                                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
594                        </svg>
595                        Share
596                    </button>
597                    <button type="button"
598                        onclick="navigator.clipboard.writeText('https://obsmaskgenerator.com').then(() => this.textContent = '✓ Copied!')"
599                        style="background: #333; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer;"
600                        aria-label="Copy Link to Clipboard">
601                        📋 Copy Link
602                    </button>
603                    <button type="button"
604                        onclick="window.open('https://reddit.com/submit?url=https://obsmaskgenerator.com&title=Free%20OBS%20Webcam%20Mask%20Generator', '_blank')"
605                        style="background: #ff4500; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; cursor: pointer;"
606                        aria-label="Share on Reddit">
607                        Reddit
608                    </button>
609                </div>
610                <p class="help-text">
611                    <strong>Tip:</strong> In OBS, add this as an "Image Mask/Blend" filter to your webcam source.
612                    White = visible, Black = hidden.
613                </p>
614
615                <!-- ── SCENE BUILDER PANEL ── -->
616                <div id="scene-builder-panel" class="hidden" style="margin-top: 1rem; background: #18181b; border: 1px solid #2f2f35; border-radius: 12px; overflow: hidden;">
617                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #2f2f35;">
618                        <span style="font-weight: 700; font-size: 0.9rem;">🎬 OBS Scene Preview</span>
619                        <div style="display: flex; gap: 0.5rem; align-items: center;">
620                            <button id="sb-reset-btn" style="background: #2f2f35; border: none; color: #adadb8; padding: 4px 10px; border-radius: 5px; font-size: 0.75rem; cursor: pointer;">↺ Reset</button>
621                            <button id="sb-close-btn" style="background: none; border: none; color: #848494; font-size: 1.2rem; cursor: pointer; line-height: 1;">✕</button>
622                        </div>
623                    </div>
624                    <div style="padding: 1rem;">
625                        <div id="sb-upload-area" style="border: 2px dashed #3d3d45; border-radius: 10px; padding: 2.5rem 1rem; text-align: center; cursor: pointer; transition: border-color 0.15s;" onmouseover="this.style.borderColor='#9146ff'" onmouseout="this.style.borderColor='#3d3d45'">
626                            <div style="font-size: 2rem; margin-bottom: 0.5rem;">🖼️</div>
627                            <p style="color: #adadb8; font-size: 0.85rem; margin: 0;">Click or drag-and-drop an OBS/game screenshot here</p>
628                            <p style="color: #848494; font-size: 0.75rem; margin-top: 0.25rem;">PNG, JPG — your mask will be overlaid on it</p>
629                            <input type="file" id="sb-file-input" accept="image/*" style="display: none;">
630                        </div>
631                        <div id="sb-canvas-wrap" class="hidden" style="text-align: center;">
632                            <canvas id="sb-canvas" style="max-width: 100%; border-radius: 8px; cursor: move; display: block; margin: 0 auto;"></canvas>
633                            <p style="color: #848494; font-size: 0.75rem; margin-top: 0.5rem;">Drag to reposition &bull; Pull corners to resize &bull; Shape follows your current mask settings</p>
634                        </div>
635                    </div>
636                </div>
637            </section>
638        </main>
639
640        <!-- How to Use Section -->
641        <section class="how-to-use">
642            <h2>📖 How to Download & Use Image Mask in OBS</h2>
643            <div class="tutorial-content">
644                <video id="tutorial-video" loop muted playsinline class="tutorial-gif" preload="none"
645                    aria-label="How to add OBS webcam mask with rounded corners - step by step tutorial showing Image Mask Blend filter in OBS Studio">
646                    <source src="how-to-use.webm" type="video/webm">
647                    Your browser does not support the video tag.
648                </video>
649                <div class="tutorial-steps">
650                    <ol>
651                        <li><strong>Generate:</strong> Choose a preset or customize your mask above</li>
652                        <li><strong>Download:</strong> Click "Download Mask (PNG)"</li>
653                        <li><strong>Open OBS:</strong> Right-click your webcam source → Filters</li>
654                        <li><strong>Add Filter:</strong> Click + → Image Mask/Blend</li>
655                        <li><strong>Select File:</strong> Browse to your downloaded mask PNG</li>
656                        <li><strong>Done!</strong> Your webcam now has the custom mask applied</li>
657                    </ol>
658                </div>
659            </div>
660        </section>
661
662        <!-- SEO Content Guide -->
663        <article class="seo-guide">
664            <h2>The Ultimate Guide to OBS Image Masks - Free Download & No Plugin Needed</h2>
665
666            <p>If you're looking to upgrade your stream's visual appeal, one of the easiest and most effective changes
667                you can make is applying a <strong>webcam mask</strong>. Gone are the days of the boring, standard 16:9
668                rectangular camera feed that clutters up your scene. In this comprehensive guide, we'll explore
669                everything you need to know about OBS webcam masks—from what they are to how you can create and apply
670                them to give your stream a professional polish.</p>
671
672            <h3>What is an OBS Webcam Mask?</h3>
673            <dl class="aio-optimized-mask-definition">
674                <dt><strong>OBS Webcam Mask (Image Mask)</strong></dt>
675                <dd>A black-and-white image file that tells OBS Studio which parts of your webcam to show and which parts to hide. It works on a simple principle: <strong>White reveals, and Black conceals</strong>. Gray areas create transparency.</dd>
676                
677                <dt><strong>Application</strong></dt>
678                <dd>By applying a mask filter to your video capture device, you can change your camera shape from a rectangle to a circle, a rounded square, a hexagon, or any custom shape you can imagine—without needing a green screen.</dd>
679            </dl>
680
681            <div class="guide-highlight">
682                <h4>Key Benefits of Using a Mask:</h4>
683                <ul>
684                    <li><strong>Saves Screen Real Estate:</strong> Cropping unnecessary background clutter allows your
685                        gameplay or content to take center stage.</li>
686                    <li><strong>Professional Branding:</strong> Unique shapes like hexagons or squircles can match your
687                        channel's overlay theme.</li>
688                    <li><strong>Clean Look:</strong> Rounded corners feel more modern and polished than sharp, harsh
689                        edges.</li>
690                    <li><strong>No Performance Cost:</strong> Unlike complex shaders, static image masks use virtually
691                        zero CPU/GPU resources.</li>
692                </ul>
693            </div>
694
695            <h3>Top 5 Popular Webcam Shapes for Streamers</h3>
696            <p>Choosing the right shape depends on your layout and personal style. Here are the most popular choices
697                used by top streamers on Twitch and YouTube:</p>
698
699            <h4>1. The Circle (Circular Mask)</h4>
700            <p>The classic circle is perfect for "Just Chatting" scenes or minimal gameplay intermissions. It focuses
701                entirely on your face and removes distracting background elements like messy rooms or doors. It's often
702                used by VTubers and speedrunners who need a compact camera footprint.</p>
703
704            <h4>2. The Rounded Square (Squircle)</h4>
705            <p>A "squircle" or rounded square is the modern standard. It preserves more of your camera's field of view
706                than a circle but eliminates the sharp, aggressive corners of a standard rectangle. It fits seamlessly
707                into almost any overlay.</p>
708
709            <h4>3. The Hexagon</h4>
710            <p>Hexagons are a favorite among sci-fi, tech, and FPS streamers. The angular geometry communicates a
711                "gamer" aesthetic and tiles well with other UI elements like mini-maps or health bars.</p>
712
713            <h4>4. The Vertical Portrait (9:16)</h4>
714            <p>With the rise of TikTok and YouTube Shorts, many streamers are opting for a vertical crop. This is ideal
715                for repurposing clips for social media without needing to re-crop your camera later.</p>
716
717            <h4>5. Custom Shapes</h4>
718            <p>The sky's the limit! You can use hearts for cozy streams, brush-stroke edges for art streams, or even
719                your logo's silhouette.</p>
720
721            <h3>How to Add a Webcam Mask in OBS Studio (Step-by-Step)</h3>
722            <p>Adding a mask is incredibly simple in OBS Studio using the native "Image Mask/Blend" filter. Follow these
723                steps:</p>
724
725            <ol>
726                <li><strong>Create or Download a Mask:</strong> Use our free <a href="/">OBS Mask Generator</a> tool
727                    above to create your perfect shape. Adjust the corner radius, border width, and aspect ratio, then
728                    click "Download Mask".</li>
729                <li><strong>Open OBS Studio:</strong> Launch OBS and go to your "Sources" dock.</li>
730                <li><strong>Select Your Camera:</strong> Right-click on your webcam source (usually named "Video Capture
731                    Device") and select <strong>"Filters"</strong>.</li>
732                <li><strong>Add the Filter:</strong> In the "Effect Filters" section (bottom half), click the <strong>+
733                        (Plus)</strong> icon and choose <strong>"Image Mask/Blend"</strong>. Give it a name like "Circle
734                    Mask".</li>
735                <li><strong>Configure Settings:</strong>
736                    <ul>
737                        <li><strong>Type:</strong> Select "Alpha Mask (Alpha Channel)" if your PNG has transparency, or
738                            "Alpha Mask (Color Channel)" if it's a black/white JPG. Our generator produces PNGs, so
739                            generally, "Alpha Mask (Alpha Channel)" is the safest bet, but if it looks wrong, try "Alpha
740                            Mask (Luminance)".</li>
741                        <li><strong>Path:</strong> Click "Browse" and select the mask file you just downloaded.</li>
742                    </ul>
743                </li>
744                <li><strong>Close and Verify:</strong> Click "Close". Your webcam should now be shaped according to the
745                    mask!</li>
746            </ol>
747
748            <div class="guide-highlight">
749                <h4>Pro Tip: Adding a Border</h4>
750                <p>A mask hides part of your video, but it doesn't add a colored outline. To add a border:</p>
751                <ol>
752                    <li>In our generator, click <strong>"Download Border Overlay"</strong> after creating your mask.
753                    </li>
754                    <li>In OBS, add a new <strong>"Image"</strong> source <em>above</em> your webcam source.</li>
755                    <li>Select the border file.</li>
756                    <li>It should align perfectly on top of your masked camera!</li>
757                </ol>
758            </div>
759
760            <h3>Troubleshooting Common Issues</h3>
761
762            <h4>My Mask looks inverted or weird!</h4>
763            <p>If your camera looks ghostly or the wrong parts are transparent, go back to the Filter settings in OBS.
764                Change the <strong>"Type"</strong> dropdown. Usually, switching from "Alpha Mask (Alpha Channel)" to
765                "Alpha Mask (Luminance)" or vice versa fixes this immediately.</p>
766
767            <h4>The Mask is stretching or squishing my camera</h4>
768            <p>This happens if the aspect ratio of your mask doesn't match your camera. For example, applying a 1:1
769                square mask to a 16:9 widescreen camera will stretch the circle into an oval. Ensure your mask
770                resolution (e.g., 1920x1080) matches your camera's base resolution.</p>
771
772            <h3>Why Download Image Masks Instead of Using an OBS Mask Plugin?</h3>
773            <p>Many streamers search for "OBS mask plugin" but plugins aren't necessary! OBS Studio has <strong>built-in Image Mask/Blend filter</strong> support. Here's why downloading PNG masks is better than plugins:</p>
774            <ul>
775                <li><strong>No Plugin Installation:</strong> OBS natively supports image masks - no third-party plugins to install, update, or troubleshoot.</li>
776                <li><strong>Zero Performance Impact:</strong> Static PNG masks use virtually no CPU/GPU compared to plugin-based solutions.</li>
777                <li><strong>Works Everywhere:</strong> Image masks work on Windows, Mac, and Linux without compatibility issues.</li>
778                <li><strong>No Plugin Conflicts:</strong> Avoid plugin version conflicts or crashes from outdated add-ons.<
778/li>
779                <li><strong>Instant Free Download:</strong> Get your OBS image mask download in seconds - no account, no subscription.</li>
780            </ul>
781
782            <h3>Why Use Our Free OBS Image Mask Generator?</h3>
783            <p>While you can make masks in Photoshop or GIMP, it takes time to get the dimensions and corner radii
784                exactly right. Our tool is designed specifically for streamers:</p>
785            <ul>
786                <li><strong>Instant Preview:</strong> See exactly how the mask looks on a 16:9 canvas before
787                    downloading.</li>
788                <li><strong>Perfect Ratios:</strong> We handle the math to ensure your curves are smooth and your
789                    borders are even.</li>
790                <li><strong>No Watermarks:</strong> Every file you download is 100% free and yours to keep.</li>
791                <li><strong>Browser-Based:</strong> No software to install—generate a mask in seconds from any device.
792                </li>
793            </ul>
794
795            <h3>Conclusion</h3>
796            <p>Visual polish is what separates amateur streams from professional broadcasts. A consistent, well-styled
797                webcam frame is a subtle detail that signals quality to new viewers. Whether you choose a sleek squircle
798                or a dynamic hexagon, our <strong>OBS Mask Generator</strong> makes it effortless to upgrade your look
799                today. Try it out above—it's completely free!</p>
800
801            <h3>How to Make Your Webcam a Circle in OBS (No Plugin)</h3>
802            <p>The most searched OBS webcam question is: <em>"how do I make my webcam circular?"</em> The answer is simpler than most people expect — you don't need a plugin, you don't need Photoshop, and you don't need to buy anything.</p>
803            <p>Here's the fast version:</p>
804            <ol>
805                <li><strong>Generate your circle mask:</strong> Use the tool at the top of this page. Click the "Circle" preset, set your canvas to match your OBS base resolution (usually 1920×1080), and click <strong>Download Mask PNG</strong>.</li>
806                <li><strong>Open OBS Studio:</strong> Right-click your webcam source in the Sources panel and select <strong>Filters</strong>.</li>
807                <li><strong>Add Image Mask/Blend:</strong> Click the <strong>+</strong> icon under Effect Filters and choose <strong>Image Mask/Blend</strong>.</li>
808                <li><strong>Browse to your PNG:</strong> Set Type to <strong>Alpha Mask (Alpha Channel)</strong> and select the downloaded file. Done — your webcam is now a perfect circle.</li>
809            </ol>
810            <p>The entire process takes under 60 seconds. This method works in OBS Studio, Streamlabs OBS, and any software that supports Image Mask/Blend filters. No third-party plugin, no account, no cost.</p>
811
812            <h3>Circle Webcam Overlay Free Download — What You Actually Need</h3>
813            <p>Many streamers search for a <strong>"circle webcam overlay free download"</strong> — but what they actually need is a <em>mask</em>, not an overlay in the traditional sense.</p>
814            <p>Here's the difference:</p>
815            <ul>
816                <li><strong>A traditional overlay</strong> is a decorative PNG frame that sits on top of your webcam. It shows a circular border but doesn't actually crop the video into a circle.</li>
817                <li><strong>A mask PNG</strong> (what this tool generates) is a transparent image that tells OBS which parts of your webcam to show and hide. Apply it via Image Mask/Blend and your webcam is <em>actually</em> cropped into a circle — not just framed.</li>
818            </ul>
819            <p>Our generator creates proper alpha-channel mask PNGs — the exact file OBS needs. Download it for free, apply it in seconds. If you want a visible colored border around your circular webcam, use the <strong>Download Border Overlay</strong> button alongside the mask.</p>
820
821            <h3>OBS Webcam Shapes — Circle, Hexagon, Rounded Rectangle &amp; More</h3>
822            <p>OBS supports any shape you can express as a mask PNG. Here's when to use each shape for your <strong>OBS facecam</strong>:</p>
823            <ul>
824                <li><strong>Circle:</strong> The most popular facecam shape. Clean, personal, and draws attention to your face. Best for talking-head content, Just Chatting streams, and IRL.</li>
825                <li><strong>Rounded Rectangle:</strong> The professional default. Softens the hard edges of a standard webcam crop. Great for gaming streams where you want a subtle, polished look.</li>
826                <li><strong>Hexagon:</strong> Gaming aesthetic. Popularized by esports and competitive streaming. Pairs well with HUD-style overlays and dark color themes.</li>
827                <li><strong>Squircle:</strong> Between a square and a circle — the "iOS icon" shape. Modern, minimal, and increasingly used by tech and creative streamers.</li>
828                <li><strong>Custom shapes:</strong> Use the polygon or star options for unique branding. Great if you want your facecam shape to match a logo or visual identity.</li>
829            </ul>
830            <p>All shapes are generated as 1920×1080 (or any custom resolution) transparent PNG files, ready to apply directly in OBS Studio or Streamlabs OBS via the Image Mask/Blend filter.</p>
831        </article>
832
833        <!-- Comprehensive Guide & FAQ (AdSense E-E-A-T Content) -->
834        <section class="comprehensive-guide">
835            <h2>The Ultimate Guide to OBS Webcam Masks (2026)</h2>
836            <p>If you're looking to elevate your Twitch, YouTube, or Facebook Gaming stream, shaping your webcam is one of the easiest ways to look professional. Standard rectangular webcams take up too much screen real estate and often look amateurish. By using an <strong>OBS mask generator</strong>, you can quickly convert your 16:9 camera into a perfect circle, a sleek squircle, or an aggressive hexagon.</p>
837            
838            <h3>Why Use a PNG Mask Instead of a Plugin?</h3>
839            <p>Many streamers make the mistake of installing third-party OBS plugins to alter their camera shape. While plugins work, they often consume unnecessary CPU resources and can break when OBS Studio updates. Using a simple <strong>transparent PNG mask</strong> combined with OBS's native <em>Image Mask/Blend</em> filter is 100% stable, uses zero extra processing power, and works across both OBS Studio and Streamlabs Desktop seamlessly.</p>
840
841            <h3>How to Apply Your Custom Webcam Mask in OBS</h3>
842            <ol>
843                <li><strong>Generate your shape:</strong> Use the free tool above to select your desired shape (e.g., Circle). Adjust the canvas size to match your webcam resolution (typically 1920x1080).</li>
844                <li><strong>Download the PNG:</strong> Click the "Download Mask (PNG)" button to save the black-and-transparent file to your computer.</li>
845                <li><strong>Open OBS Studio:</strong> Right-click on your Video Capture Device (Webcam) source in the Sources panel and select <strong>Filters</strong>.</li>
846                <li><strong>Add the Filter:</strong> Click the '+' icon under Effect Filters and select <strong>Image Mask/Blend</strong>.</li>
847                <li><strong>Configure:</strong> Change the "Type" to <em>Alpha Mask (Alpha Channel)</em>. Click "Browse" and locate the PNG file you just downloaded. Your camera will instantly take the shape of the mask!</li>
848            </ol>
849
850            <h3>Frequently Asked Questions (FAQ)</h3>
851            <div class="faq-accordion">
852                <details>
853                    <summary>Where can I download free OBS image masks?</summary>
854                    <p>Right here! OBS Mask Generator offers free OBS image mask downloads. Select a preset (circle, rounded rectangle, hexagon), customize it, and download the PNG. No signup required.</p>
855                </details>
856                <details>
857                    <summary>Do I need an OBS mask plugin?</summary>
858                    <p>No. OBS Studio has built-in Image Mask/Blend filter support. Simply download a PNG mask from our generator and apply it using native filters.</p>
859                </details>
860                <details>
861                    <summary>How do I add rounded corners to my webcam in OBS?</summary>
862                    <p>Use our tool to create a rounded rectangle mask PNG, then in OBS right-click your webcam source, go to Filters, add Image Mask/Blend, and select the downloaded file.</p>
863                </details>
864            </div>
865        </section>
866
867        <!-- Latest Streaming Guides -->
868        <section class="latest-guides">
869            <h2>Latest Streaming Guides</h2>
870            <div class="guides-grid">
871                <a href="/blog/best-obs-settings.html" class="guide
871-card">
872                    <div class="guide-title">Best OBS Settings for 1080p 60fps</div>
873                    <div class="guide-author">By Nikhil Agarwal</div>
874                </a>
875                <a href="/blog/fix-obs-audio-delay.html" class="guide-card">
876                    <div class="guide-title">How to Fix OBS Audio Delay/Desync</div>
877                    <div class="guide-author">By Nikhil Agarwal</div>
878                </a>
879                <a href="/blog/best-bitrate-streaming.html" class="guide-card">
880                    <div class="guide-title">Ultimate Guide to Twitch Bitrate</div>
881                    <div class="guide-author">By Nikhil Agarwal</div>
882                </a>
883                <a href="/blog/obs-hotkeys-guide.html" class="guide-card">
884                    <div class="guide-title">Essential OBS Hotkeys for Streamers</div>
885                    <div class="guide-author">By Nikhil Agarwal</div>
886                </a>
887            </div>
888        </section>
889
890        <!-- More Free OBS Tools -->
891        <section class="latest-guides">
892            <h2>More Free OBS &amp; Streaming Tools</h2>
893            <div class="guides-grid">
894                <a href="/bitrate-calculator/" class="guide-card">
895                    <div class="guide-title">OBS &amp; Twitch Bitrate Calculator</div>
896                    <div class="guide-author">Find your perfect streaming bitrate</div>
897                </a>
898                <a href="/hotkey-reference/" class="guide-card">
899                    <div class="guide-title">OBS Hotkeys Cheat Sheet</div>
900                    <div class="guide-author">Every OBS keyboard shortcut, searchable</div>
901                </a>
902                <a href="/aspect-ratio-calculator/" class="guide-card">
903                    <div class="guide-title">Aspect Ratio Calculator</div>
904                    <div class="guide-author">16:9, 4:3 &amp; 9:16 stream resolutions</div>
905                </a>
906                <a href="/settings-generator/" class="guide-card">
907                    <div class="guide-title">OBS Settings Generator</div>
908                    <div class="guide-author">Best encoder settings for your PC</div>
909                </a>
910                <a href="/overlay-generator/" class="guide-card">
911                    <div class="guide-title">Stream Overlay Generator</div>
912                    <div class="guide-author">Free customizable stream overlays</div>
913                </a>
914                <a href="/countdown-timer/" class="guide-card">
915                    <div class="guide-title">Stream Countdown Timer</div>
916                    <div class="guide-author">Starting-soon countdown for OBS</div>
917                </a>
918            </div>
919        </section>
920
921        <!-- Footer -->
922        <footer class="footer">
923            <p>Free OBS Tools &amp; Generators | No signup required | <a href="/privacy-policy.html"
924                    style="color: var(--accent-primary, #9146ff);">Privacy Policy</a></p>
925            <div style="margin-top: 15px; font-size: 0.85em; line-height: 1.8;">
926                <p><strong style="color: #a78bfa;">OBS Calculators:</strong>
927                    <a href="/bitrate-calculator/" style="color: #9146ff;">Bitrate</a> |
928                    <a href="/recording-size-calculator/" style="color: #9146ff;">Recording Size</a> |
929                    <a href="/quality-checker/" style="color: #9146ff;">Quality Checker</a> |
930                    <a href="/aspect-ratio-calculator/" style="color: #9146ff;">Aspect Ratio</a>
931                </p>
932                <p><strong style="color: #a78bfa;">AI Webcam Tools:</strong>
933                    <a href="/obs-background-removal/" style="color: #9146ff;">
933Remove Background (OBS)</a> |
934                    <a href="/webcam-background-blur/" style="color: #9146ff;">Blur Webcam Background</a> |
935                    <a href="/virtual-background-no-green-screen/" style="color: #9146ff;">Virtual Background No Green Screen</a> |
936                    <a href="/remove-video-background/" style="color: #9146ff;">Remove Video Background</a>
937                </p>
938                <p><strong style="color: #a78bfa;">Generators & Assets:</strong>
939                    <a href="/" style="color: #9146ff;">Webcam Mask</a> |
940                    <a href="/twitch-panel-generator/" style="color: #9146ff;">Twitch Panels</a> |
941                    <a href="/settings-generator/" style="color: #9146ff;">Settings Generator</a> |
942                    <a href="/overlay-generator/" style="color: #9146ff;">Overlay Generator</a> |
943                    <a href="/starting-screen/" style="color: #9146ff;">Starting Screen</a> |
944                    <a href="/stream-schedule/" style="color: #9146ff;">Stream Schedule</a> |
945                    <a href="/vertical-stream-layout/" style="color: #9146ff;">Vertical Layout</a> |
946                    <a href="/chat-overlay-editor/" style="color: #9146ff;">Chat Overlay CSS</a> |
947                    <a href="/kick-chat-overlay-obs/" style="color: #53fc18;">Kick Chat CSS</a> |
948                    <a href="/emote-text-maker/" style="color: #9146ff;">Emote Maker</a> |
949                    <a href="/twitch-emote-resizer/" style="color: #9146ff;">Twitch Emote Resizer</a>
950                </p>
951                <p><strong style="color: #a78bfa;">Legal:</strong>
952                    <a href="/privacy-policy.html" style="color: #9146ff;">Privacy Policy</a> |
953                    <a href="/terms.html" style="color: #9146ff;">Terms of Service</a> |
954                    <a href="/about.html" style="color: #9146ff;">About Us</a> |
955                    <a href="/contact.html" style="color: #9146ff;">Contact</a>
956                </p>
957                <p><strong style="color: #a78bfa;">Useful Utilities:</strong>
958                    <a href="/countdown-timer/" style="color: #9146ff;">Countdown Timer</a> |
959                    <a href="/hotkey-reference/" style="color: #9146ff;">OBS Hotkeys</a> |
960                    <a href="/mynofi/" style="color: #9146ff;">Mynofi Recording Alerts</a> |
961                    <a href="/blog/" style="color: #9146ff;">Blog</a>
962                </p>
963            </div>
964        </footer>
965    </div>
966
967    
967<script src="script.js" defer></script>
967
968    
968<script src="/components.js" defer></script>
968
969
970    
970<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4560264570048889" crossorigin="anonymous"></script>
970
971
972    <!-- ── STREAM PACK WIZARD MODAL ── -->
973    <div id="pack-wizard-modal" class="hidden" style="position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem;">
974        <div style="background: #18181b; border: 1px solid #2f2f35; border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.7);">
975            <!-- Header -->
976            <div style="display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid #2f2f35;">
977                <div>
978                    <div style="font-size: 1.1rem; font-weight: 700;">📦 Stream Pack Generator</div>
979                    <div style="color: #848494; font-size: 0.8rem; margin-top: 2px;">Build 3 masks &mdash; Gaming, Just Chatting, Portrait &mdash; download as one ZIP</div>
980                </div>
981                <button id="pack-close-btn" style="background: none; border: none; color: #848494; font-size: 1.4rem; cursor: pointer; padding: 0 4px;">✕</button>
982            </div>
983
984            <!-- Stepper -->
985            <div style="display: flex; align-items: center; justify-content: center; gap: 0; padding: 1.25rem 1.5rem 0;">
986                <div class="pack-step-dot" style="width: 32px; height: 32px; border-radius: 50%; background: #9146ff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; transition: background 0.2s;">1</div>
987                <div style="flex: 1; height: 2px; background: #2f2f35; transition: background 0.2s;"></div>
988                <div class="pack-step-dot" style="width: 32px; height: 32px; border-radius: 50%; background: #2f2f35; color: #848494; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; transition: background 0.2s;">2</div>
989                <div style="flex: 1; height: 2px; background: #2f2f35;"></div>
990                <div class="pack-step-dot" style="width: 32px; height: 32px; border-radius: 50%; background: #2f2f35; color: #848494; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; transition: background 0.2s;">3</div>
991            </div>
992
993            <!-- Step body -->
994            <div style="padding: 1.25rem 1.5rem;">
995                <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem;">
996                    <div id="pack-step-title" style="font-size: 1.2rem; font-weight: 700;">🎮 Gaming</div>
997                    <div id="pack-step-sub" style="color: #848494; font-size: 0.8rem;">1 of 3</div>
998                </div>
999
1000                <!-- Mini Canvas Preview -->
1001                <canvas id="pack-mini-canvas" width="400" height="225" style="width: 100%; border-radius: 8px; background: #111; display: block; margin-bottom: 1rem;"></canvas>
1002
1003                <!-- Controls -->
1004                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;">
1005                    <div>
1006                        <label style="display: block; font-size: 0.75rem; color: #848494; margin-bottom: 4px;">WIDTH (px)</label>
1007                        <input type="number" id="pack-width" value="1920" min="100" max="7680" style="width: 100%; background: #26262c; border: 1px solid #2f2f35; border-radius: 6px; padding: 6px 10px; color: #efeff1; font-size: 0.875rem; font-family: inherit;">
1008                    </div>
1009                    <div>
1010                        <label style="display: block; font-size: 0.75rem; color: #848494; margin-bottom: 4px;">HEIGHT (px)</label>
1011                        <input type="number" id="pack-height" value="1080" min="100" max="7680" style="width: 100%; background: #26262c; border: 1px solid #2f2f35; border-radius: 6px; padding: 6px 10px; color: #efeff1; font-size: 0.875rem; font-family: inherit;">
1012                    </div>
1013                </div>
1014
1015                <!-- Shape -->
1016                <div style="margin-bottom: 1rem;">
1017                    <label style="display: block; font-size: 0.75rem; color: #848494; margin-bottom: 6px;">SHAPE</label>
1018                    <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
1019                        <button class="pack-shape-btn active" data-shape="rectangle" style="padding: 5px 12px; border-radius: 6px; border: 1px solid #9146ff; background: rgba(145,70,255,0.15); color: #9146ff; font-size: 0.8rem; cursor: pointer; font-family: inherit;">Rect</button>
1020                        <button class="pack-shape-btn" data-shape="ellipse" style="padding: 5px 12px; border-radius: 6px; border: 1px solid #2f2f35; background: #26262c; color: #adadb8; font-size: 0.8rem; cursor: pointer; font-family: inherit;">Circle</button>
1021                        <button class="pack-shape-btn" data-shape="polygon" style="padding: 5px 12px; border-radius: 6px; border: 1px solid #2f2f35; background: #26262c; color: #adadb8; font-size: 0.8rem; cursor: pointer; font-family: inherit;">Hex</button>
1022                        <button class="pack-shape-btn" data-shape="squircle" style="padding: 5px 12px; border-radius: 6px; border: 1px solid #2f2f35; background: #26262c; color: #adadb8; font-size: 0.8rem; cursor: pointer; font-family: inherit;">Squircle</button>
1023                        <button class="pack-shape-btn" data-shape="star" style="padding: 5px 12px; border-radius: 6px; border: 1px solid #2f2f35; background: #26262c; color: #adadb8; font-size: 0.8rem; cursor: pointer; font-family: inherit;">Star</button>
1024                    </div>
1025                </div>
1026
1027                <!-- Corner Radius -->
1028                <div style="margin-bottom: 1rem;">
1029                    <div style="display: flex; justify-content: space-between;">
1030                        <label style="font-size: 0.75rem; color: #848494;">CORNER RADIUS</label>
1031                        <span id="pack-corner-value" style="font-size: 0.75rem; color: #9146ff;">10%</span>
1032                    </div>
1033                    <input type="range" id="pack-corner" min="0" max="50" value="10" style="width: 100%; margin-top: 4px; accent-color: #9146ff;">
1034                </div>
1035
1036                <!-- Rotation -->
1037                <div style="margin-bottom: 0.5rem;">
1038                    <div style="display: flex; justify-content: space-between;">
1039                        <label style="font-size: 0.75rem; color: #848494;">ROTATION</label>
1040                        <span id="pack-rotation-value" style="font-size: 0.75rem; color: #9146ff;">0deg</span>
1041                    </div>
1042                    <input type="range" id="pack-rotation" min="0" max="360" value="0" style="width: 100%; margin-top: 4px; accent-color: #9146ff;">
1043                </div>
1044            </div>
1045
1046            <!-- Footer Nav -->
1047            <div style="display: flex; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid #2f2f35;">
1048                <button id="pack-prev-btn" disabled style="flex: 1; padding: 0.65rem; background: #26262c; border: 1px solid #2f2f35; border-radius: 8px; color: #adadb8; font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer;">← Back</button>
1049                <button id="pack-next-btn" style="flex: 2; padding: 0.65rem; background: linear-gradient(135deg, #9146ff, #772ce8); border: none; border-radius: 8px; color: #fff; font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer;">Next Step →</button>
1050                <button id="pack-download-btn" class="hidden" style="flex: 2; padding: 0.65rem; background: linear-gradient(135deg, #00f593, #00c97a); border: none; border-radius: 8px; color: #000; font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer;">⬇ Download All as ZIP</button>
1051            </div>
1052        </div>
1053    </div>
1054
1055    
1055<script src="scene-builder.js" defer></script>
1055
1056    
1056<script src="stream-pack.js" defer></script>
vendor: 2 bytes, line 1056
1056
1057<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ccdd1965fad14f3fac9a37f05bf31abf","r":1,"spa":2}' crossorigin="anonymous"></script>
1057
1058</body>
1059
1060</html>
1061

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.