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 & 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>°</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 — now tie it together. OWN3D's premium overlay packages give you matching alerts, panels, screens & 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 →</a> 573 <span class="own3d-cta__disclosure">Affiliate link — 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 • Pull corners to resize • 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 & 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 & Streaming Tools</h2> 893 <div class="guides-grid"> 894 <a href="/bitrate-calculator/" class="guide-card"> 895 <div class="guide-title">OBS & 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 & 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 & 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 — Gaming, Just Chatting, Portrait — 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.