Bear Blog title styles

The default Bear Blog theme keeps the blog title simple, plain text at a fixed size. That leaves plenty of room to give it more character, and I love doing just that.

This page collects small CSS tweaks and variations for the look and typography of the title itself. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 22 hours, 7 minutes ago.

Underline accent

.title h1 {
    display: inline-block;
    padding-block-end: 4px;
    border-block-end: 3px solid var(--link-color);
}

Serif small caps

Serif small caps title

.title h1 {
    font-family: Georgia, serif;
    font-size: 1.8em;
    font-variant: small-caps;
    letter-spacing: 0.03em;
}

Rainbow

Rainbow title

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .title h1 {
        display: inline-block;
        background-image: linear-gradient(
            to right,
            #ef5350, #f48fb1, #7e57c2, #2196f3,
            #26c6da, #43a047, #eeff41, #f9a825, #ff5722
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

Sparkle

Sparkle title

.title h1 {
    position: relative;
    display: inline-block;
}

.title h1::after {
    content: "*:･ﾟ✧";
    margin-inline-start: 0.25em;
    font-size: 0.9em;
    color: var(--link-color);
}

Cursor

Cursor title

.title h1 {
    position: relative;
    display: inline-block;
    padding-inline-end: 0.4em;
}

.title h1::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block: 15% 15%;
    width: 2px;
    background: currentColor;
    animation: title-cursor 1.1s steps(1, end) infinite;
}

@keyframes title-cursor {
    0%, 49% { opacity: 0; }
    50%, 100% { opacity: 1; }
}

Highlighted

Highlighted title

.title h1 {
    display: inline;
    padding: 0.3em 0.5em;
    background: color-mix(in srgb, var(--link-color) 25%, transparent);
}

Tilde

Tilde title

.title h1::before {
    content: "~";
    color: var(--link-color);
    vertical-align: 0.05em;
}

Dot

Dot title

.title h1::after {
    content: ".";
    color: var(--link-color);
}

Bracket

Bracket title

.title h1::before {
    content: "[ ";
    color: var(--link-color);
    vertical-align: 0.07em;
}

.title h1::after {
    content: " ]";
    color: var(--link-color);
    vertical-align: 0.07em;
}

Boxed

Boxed title

.title h1 {
    display: inline-block;
    padding: 0.15em 0.4em;
    border: 2px solid var(--link-color);
}

Pill

Pill title

.title h1 {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--link-color) 20%, transparent);
}

Double underline

Double underline title

.title h1 {
    text-decoration: underline double;
    text-underline-offset: 0.3em;
}

Shadow

Shadow title

.title h1 {
    text-shadow: 2px 2px 0 var(--link-color);
}

Slash

Slash title

.title h1::before {
    content: "// ";
    color: var(--link-color);
}

Gradient underline

Gradient underline title

.title h1 {
    display: inline-block;
    padding-block-end: 6px;
    border-block-end: 3px solid transparent;
    border-image: linear-gradient(to right, var(--link-color), transparent) 1;
}

Want more? Check out the full Bear Blog library.