CSS Drop Cap Generator

A drop cap (dropped capital) is a large capital letter at the beginning of a text block that spans multiple lines, typically used in books, magazines, and blog posts to create a visually striking opening. In CSS, this is achieved using the ::first-letter pseudo-element combined with float: left, adjusted font-size, and line-height to make the letter "drop" into the paragraph.

Simply adjust the settings on the right panel — font size, color, spacing, and effects — and watch the preview update in real time. Once satisfied, click the Copy button to grab the generated CSS code. Paste it into your website's stylesheet, targeting your desired paragraph class (e.g., .article-intro::first-letter).

The ::first-letter pseudo-element is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge, with full support dating back to IE9+. It's one of the most reliable CSS features. Just ensure the target element is a block-level element (like <p>) for consistent results.

Absolutely! You can apply any font family to the ::first-letter pseudo-element. For Google Fonts like Playfair Display or Lora, simply load the font via a <link> tag or @import, then reference it in the generated CSS. The generator includes popular serif and sans-serif font stacks to get you started.

No negative impact on SEO — drop caps are purely visual CSS styling and don't alter the underlying HTML text content, so search engines read the paragraph normally. For accessibility, screen readers also ignore the visual styling and read the text as usual. Just avoid using images for drop caps, as CSS-based solutions are more accessible and SEO-friendly.

Many WordPress themes have built-in drop cap options in the block editor (Gutenberg) — look for the "Drop Cap" toggle in the paragraph block settings sidebar. If your theme doesn't support it natively, you can copy the CSS from this generator and paste it into Appearance → Customize → Additional CSS, then add a custom class to your paragraphs.

Mobile screens have narrower text columns, which can cause oversized drop caps to break the layout. To fix this, use a media query to reduce the font-size on smaller screens. For example: @media (max-width: 600px) { .your-class::first-letter { font-size: 3em; } }. Always test your drop cap on multiple screen sizes.

The sweet spot is typically between 3em and 5em, depending on your body text size and line height. A drop cap that spans 2-3 lines of text looks classic and balanced. Use the live preview in this generator to experiment — what looks best depends on your specific font, content width, and design style.