DropCap Studio
Paste an opening paragraph, pick a style, copy a cross-browser snippet. The text never leaves your browser.
Opening paragraph
246/5000
Style presets
Customise
Size multiplier3×
Background
transparent
Padding8px
Border radius0px
Line-height boost0.25
Float direction
Live preview
An Article Opening
The quick brown fox jumps over the lazy dog while the morning mist lifts off the meadow. Editors have known for centuries that a well-set opening line invites the reader in; the drop cap is the oldest trick in the book, and still one of the best.
The second paragraph flows on normally — the cap only opens the first. Check the wrap, the spacing, and the alignment against three lines of body text before you copy the snippet.
Export snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DropCap snippet</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap">
<style>
/* DropCap — generated drop cap (works in every browser) */
.dc-paragraph {
font-size: 16px;
line-height: 24px;
}
.dc-cap {
float: left;
font-family: 'Playfair Display', Georgia, serif;
font-size: 48px;
line-height: 24px; /* = body line-height for clean alignment */
color: #111827;
padding: 8px;
}
/* Modern browsers: native drop-cap geometry (Chromium; Firefox/Safari keep the float path above) */
@supports (initial-letter: 2) {
.dc-cap {
initial-letter: 2;
float: none;
padding: 0;
margin: 0;
}
}
body { font-family: Georgia, serif; max-width: 640px; margin: 3rem auto; padding: 0 1rem; }
</style>
</head>
<body>
<p class="dc-paragraph"><span class="dc-cap">T</span>he quick brown fox jumps over the lazy dog while the morning mist lifts off the meadow. Editors have known for centuries that a well-set opening line invites the reader in; the drop cap is the oldest trick in the book, and still one of the best.</p>
</body>
</html>Cap “T” · 48px · spans 2 lines · 'Playfair Display', Georgia, serif