Add this fancy initial caps feature to your blog posts! Simply copy the code below and add it to a code block, then replace the placeholder text with your first paragraph and voila! You've got yourself a fancy drop cap.

📝 Modern Drop Cap Effect for Squarespace

Copy and paste this into a Code Block at the top of your Blog Post. Replace the placeholder text with your first paragraph!

<!-- Modern Drop Cap Effect -->
<style>
.drop-cap-container {
    position: relative;
    margin: 2.5em auto;
    padding: 2em;
    max-width: 800px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.drop-cap-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.drop-cap-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #14A19D, #0E817C);
    border-radius: 12px 12px 0 0;
}

.drop-cap-container p {
    font-size: 1.2em;
    line-height: 1.7;
    color: #2c3e50;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.drop-cap-container p:first-of-type::first-letter {
    float: left;
    font-size: 4.5em;
    line-height: 1;
    padding-right: 0.1em;
    font-weight: 700;
    color: #14A19D;
    font-family: inherit;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.drop-cap-container p:first-of-type {
    text-indent: 0;
    overflow: visible;
    position: relative;
}

.drop-cap-container p:first-of-type::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #e0e0e0;
    margin: 1.5em 0 0;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .drop-cap-container {
        margin: 1.5em 1em;
        padding: 1.5em;
    }
    
    .drop-cap-container p {
        font-size: 1.1em;
        line-height: 1.6;
    }
    
    .drop-cap-container p:first-of-type::first-letter {
        font-size: 4em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .drop-cap-container,
    .drop-cap-container:hover {
        transition: none;
    }
    
    .drop-cap-container p:first-of-type::first-letter {
        text-shadow: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .drop-cap-container {
        background: #1a1a1a;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    
    .drop-cap-container p {
        color: #e0e0e0;
    }
    
    .drop-cap-container p:first-of-type::after {
        background: #333;
    }
}
</style>

<article 
    class="drop-cap-container"
    itemscope 
    itemtype="https://schema.org/Article"
    role="article"
    aria-label="Article with drop cap">
    <p itemprop="articleBody">ADD PARAGRAPH TEXT HERE!</p>
</article>

🚀 Drop Cap Tool—User Instructions

This tool lets you add a drop cap (large first letter) to the first paragraph of a blog post. It enhances readability, improves aesthetics, and is optimized for SEO and accessibility.

✍️ How to Use This Code

Paste the code into your blog post or page.
- Add a new HTML code block and post this code inside
Scroll to the bottom of the code and replace:
- ADD PARAGRAPH TEXT HERE! with your blog post's first paragraph.

🎨 How to Customize the Styles

1️⃣ Edit the Drop Cap (First Letter)

🛠 Find this part of the code in the CSS section:

.drop-cap-container p:first-of-type::first-letter {

font-size: 4.5em; /* Change size */

color: #14A19D; /* Change color */

font-weight: 700; /* Change boldness */

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Remove for a clean look */

}

font-size = to change size of the first letter
color = to change the first letter color
font-weight = to change the boldness of the first letter

📈 SEO & Accessibility Optimizations

This tool is fully optimized for SEO and screen readers by using structured data (Schema.org) and ARIA attributes.

✅ Schema.org Markup: Helps search engines understand that this is an article.
✅ itemprop="articleBody": Explicitly tells Google the main content of the article.
✅ ARIA Accessibility (role="article"): Screen readers correctly identify this as an article.
✅ Semantic HTML (<article>): Improves site structure and search rankings.

SEO Benefits

🔹 Helps Google better understand the article structure.
🔹 Improves accessibility for visually impaired users.
🔹 Enhances rich snippets in search results.