OneTaskBy Tim King · Updated
Drop Cap Generator
Plain, Boxed or Outline Styles Dropping Two to Five Lines, With Float Fallback
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Drop Cap Generator works
A drop cap generator styles the first letter of a paragraph so it sinks several lines into the text, the way books and magazines open a chapter. Choose how many lines deep, the font and a plain, boxed or outline style, then copy CSS that works in every current browser.
Drop caps need no extra HTML. The ::first-letter pseudo-element selects the first letter of a
block, including any opening quotation mark, so the paragraph stays plain text that search engines
and screen readers read normally.
How the drop cap generator sizes the letter
The modern way is initial-letter: 3, which tells the browser to make the letter exactly three
lines tall and sink it into those lines, lining its top up with the first line's capitals and its
base with the third line. Chrome, Edge and Safari support it, Safari through the -webkit- prefix.
Firefox does not yet, so the generator writes a float first: the letter floats left at a font size
worked out from the number of lines and the line height, with a tight line-height so it does not
push the text down. An @supports block then switches to initial-letter wherever it works.
Styles
Plain colours the letter. Boxed puts it on a solid block of colour with white type, a
common magazine look. Outline draws only the edge of the letter with -webkit-text-stroke,
which suits large serif capitals. A serif drop cap over sans-serif body text is the classic pairing
and gives the most contrast.
FAQ
Why does my drop cap only apply to the first paragraph?
It applies to every element with the class. Put the class only on the opening paragraph of an
article, or use a selector such as article > p:first-of-type::first-letter so it follows the
content automatically.
Why is the letter slightly too tall or too short in Firefox?
The float fallback estimates the size from the line height, and every font has different capital
height. Nudge the font size and top margin in the fallback rule for your font; browsers that
support initial-letter are not affected.
Does a drop cap affect accessibility?
No. The letter is still part of the word in the page, so screen readers read the word whole and copy and paste keeps it intact. Avoid wrapping the first letter in its own span, which can make some screen readers spell the word out.
Can the paragraph start with a quotation mark?
Yes. The ::first-letter selector includes punctuation that comes before the first letter, so an
opening quotation mark becomes part of the drop cap along with the letter after it.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Text Highlight Effect
Style a highlighter-pen mark on key words and copy the CSS.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.
CSS Text Shadow Generator
Visual text-shadow builder with drop, long, neon and outline presets.
Line Clamp Helper
Truncate text after a set number of lines with an ellipsis.