Lorem Ipsum Generator — Free HTML CSS JS Snippet

<div class="wrap">
  <h2>Lorem Ipsum Generator</h2>

  <div class="controls">
    <div class="ctrl-group">
      <label>Unit</label>
      <div class="seg">
        <button class="seg-btn active" data-unit="paragraphs">Paragraphs</button>
        <button class="seg-btn" data-unit="sentences">Sentences</button>
        <button class="seg-btn" data-unit="words">Words</button>
      </div>
    </div>
    <div class="ctrl-group">
      <label>Amount</label>
      <input type="number" id="amount-input" min="1" max="50" value="3" />
    </div>
  </div>

  <label class="checkbox-row">
    <input type="checkbox" id="start-classic" checked />
    Start with "Lorem ipsum dolor sit amet..."
  </label>

  <div class="output-box" id="output-box"></div>

  <div class="footer-row">
    <span class="stat" id="stat-line"></span>
    <div class="btn-row">
      <button class="btn" id="btn-regenerate">Regenerate</button>
      <button class="btn btn-primary" id="btn-copy">Copy</button>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; }
h2 { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 16px; }

.controls { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ctrl-group label { display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.seg { display: flex; background: #f1f5f9; border-radius: 9px; padding: 3px; gap: 2px; }
.seg-btn { padding: 7px 12px; border: none; background: none; border-radius: 7px; font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; }
.seg-btn.active { background: #fff; color: #6366f1; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#amount-input { width: 80px; padding: 8px 10px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px; }
#amount-input:focus { outline: none; border-color: #6366f1; }

.checkbox-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #64748b; margin-bottom: 16px; cursor: pointer; user-select: none; }
.checkbox-row input { accent-color: #6366f1; width: 15px; height: 15px; }

.output-box { min-height: 160px; max-height: 340px; overflow-y: auto; padding: 16px 18px; border: 1.5px solid #e2e8f0; border-radius: 12px; background: #f8fafc; font-size: 13.5px; line-height: 1.8; color: #334155; }
.output-box p { margin-bottom: 12px; }
.output-box p:last-child { margin-bottom: 0; }

.footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.stat { font-size: 11.5px; color: #94a3b8; }
.btn-row { display: flex; gap: 8px; }
.btn { font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff; color: #374151; cursor: pointer; }
.btn:hover { border-color: #6366f1; color: #6366f1; }
.btn-primary { background: #6366f1; border-color: #6366f1; color: #fff; }
.btn-primary:hover { background: #4f46e5; color: #fff; }

const WORDS = ('lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat duis aute irure in reprehenderit voluptate velit esse cillum eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt culpa qui officia deserunt mollit anim id est laborum at vero eos accusamus iusto odio dignissimos ducimus blanditiis praesentium voluptatum deleniti atque corrupti quos quas molestias excepturi sint occaecati cupiditate provident similique').split(' ');

let unit = 'paragraphs';

function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }

function randWord() { return pick(WORDS); }

function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }

function genSentence(minWords, maxWords) {
  const count = minWords + Math.floor(Math.random() * (maxWords - minWords + 1));
  const words = [];
  for (let i = 0; i < count; i++) words.push(randWord());
  let sentence = words.join(' ');
  if (count > 6) {
    const commaPos = 2 + Math.floor(Math.random() * (count - 4));
    const parts = sentence.split(' ');
    parts[commaPos] = parts[commaPos] + ',';
    sentence = parts.join(' ');
  }
  return capitalize(sentence) + '.';
}

function genParagraph(sentenceCount) {
  const sentences = [];
  for (let i = 0; i < sentenceCount; i++) sentences.push(genSentence(5, 16));
  return sentences.join(' ');
}

function generate() {
  const amount = Math.min(50, Math.max(1, Number(document.getElementById('amount-input').value) || 1));
  const startClassic = document.getElementById('start-classic').checked;
  const outputBox = document.getElementById('output-box');
  let html = '';
  let wordCount = 0;

  if (unit === 'words') {
    const words = [];
    for (let i = 0; i < amount; i++) words.push(randWord());
    let text = capitalize(words.join(' ')) + '.';
    if (startClassic) {
      const classic = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
      text = amount <= 8 ? capitalize(WORDS.slice(0, amount).join(' ')) + '.' : classic + ', ' + words.slice(8).join(' ') + '.';
    }
    html = '<p>' + text + '</p>';
    wordCount = amount;
  } else if (unit === 'sentences') {
    const sentences = [];
    for (let i = 0; i < amount; i++) sentences.push(genSentence(6, 14));
    if (startClassic) sentences[0] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
    html = '<p>' + sentences.join(' ') + '</p>';
    wordCount = sentences.join(' ').split(' ').length;
  } else {
    const paragraphs = [];
    for (let i = 0; i < amount; i++) paragraphs.push(genParagraph(3 + Math.floor(Math.random() * 3)));
    if (startClassic) {
      paragraphs[0] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' + paragraphs[0];
    }
    html = paragraphs.map(p => '<p>' + p + '</p>').join('');
    wordCount = paragraphs.join(' ').split(' ').length;
  }

  outputBox.innerHTML = html;
  document.getElementById('stat-line').textContent = '~' + wordCount + ' words';
}

document.querySelectorAll('.seg-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    unit = btn.dataset.unit;
    generate();
  });
});

document.getElementById('amount-input').addEventListener('input', generate);
document.getElementById('start-classic').addEventListener('change', generate);
document.getElementById('btn-regenerate').addEventListener('click', generate);
document.getElementById('btn-copy').addEventListener('click', () => {
  navigator.clipboard.writeText(document.getElementById('output-box').innerText);
});

generate();