Bear Blog title styles

The default Bear Blog theme keeps the blog title simple, plain text at a fixed size. That leaves a lot of room to experiment, and I love experimenting.

This page collects small CSS tweaks and variations for styling that title. 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 0 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;
}