Placeholder Image Generator - Custom Size & Color

Settings

<div class="pg-field">
  <label>Dimensions (px)</label>
  <div class="pg-size-row">
    <input type="number" id="pg-width" value="300" min="1" max="4000" />
    <span class="pg-size-sep">×</span>
    <input type="number" id="pg-height" value="250" min="1" max="4000" />
  </div>
</div>

<div class="pg-field">
  <div class="pg-presets-label">Presets</div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">Common</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="150" data-h="150">150×150</button>
      <button class="pg-preset-btn" data-w="300" data-h="250">300×250</button>
      <button class="pg-preset-btn" data-w="400" data-h="300">400×300</button>
      <button class="pg-preset-btn" data-w="800" data-h="600">800×600</button>
      <button class="pg-preset-btn" data-w="1200" data-h="630">1200×630</button>
      <button class="pg-preset-btn" data-w="1920" data-h="1080">1920×1080</button>
    </div>
  </div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">Social Media</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="820" data-h="312">FB Cover</button>
      <button class="pg-preset-btn" data-w="1500" data-h="500">Twitter Header</button>
      <button class="pg-preset-btn" data-w="1080" data-h="1080">Instagram Post</button>
      <button class="pg-preset-btn" data-w="1080" data-h="1920">Instagram Story</button>
      <button class="pg-preset-btn" data-w="1200" data-h="627">LinkedIn Post</button>
      <button class="pg-preset-btn" data-w="1280" data-h="720">YouTube Thumb</button>
    </div>
  </div>

  <div class="pg-presets-group">
    <div class="pg-presets-group-title">Ad Banners</div>
    <div class="pg-preset-btns">
      <button class="pg-preset-btn" data-w="728" data-h="90">Leaderboard</button>
      <button class="pg-preset-btn" data-w="300" data-h="600">Half Page</button>
      <button class="pg-preset-btn" data-w="160" data-h="600">Skyscraper</button>
      <button class="pg-preset-btn" data-w="320" data-h="50">Mobile Banner</button>
      <button class="pg-preset-btn" data-w="468" data-h="60">Full Banner</button>
    </div>
  </div>
</div>

<div class="pg-field">
  <label>Background Color</label>
  <div class="pg-color-row">
    <input type="color" id="pg-bg-picker" value="#cccccc" />
    <input type="text" id="pg-bg-hex" value="#cccccc" maxlength="7" />
  </div>
</div>

<div class="pg-field">
  <label>Text Color</label>
  <div class="pg-color-row">
    <input type="color" id="pg-text-picker" value="#666666" />
    <input type="text" id="pg-text-hex" value="#666666" maxlength="7" />
  </div>
</div>

<div class="pg-field">
  <label>Custom Text (leave blank for auto)</label>
  <input type="text" id="pg-custom-text" placeholder="e.g. Logo Here" />
</div>

<div class="pg-field">
  <label>Font Size (px)</label>
  <div class="pg-font-row">
    <input type="number" id="pg-font-size" value="0" min="0" max="500" />
    <span>0 = auto</span>
  </div>
</div>