3 CSS Drop Caps
Drop caps add visual emphasis and a touch of elegance to the beginning of text blocks. This collection of CSS drop cap examples demonstrates how to use ::first-letter, custom fonts, and float techniques to create stylish, readable layouts.
Last updated:
CSS Blockquote with Gradient Drop Cap
A unique drop cap is created with modern CSS techniques - its complex background is generated by layering linear-gradient and repeating-conic-gradient, while its responsive size is managed by calc().
Big Drop Cap
The demo showcases a classic yet relevant technique for creating an extra-large drop cap via :first-letter using negative horizontal margins (margin-right: -1000px) and line-height: 1, allowing the element not to affect the main text flow, thus ensuring clean typography.
