Cute, Simple Heading Designs for Your Blog: Copy-and-Paste CSS

This post was automatically translated by AI from the Japanese original. The screenshots are in Japanese.

I’ve prepared some simple heading designs you can use just by copying and pasting the CSS.
Feel free to change the font size and colors.

Choose a color and a shape to make the code#

Choose your favorite color and design, and you’ll get CSS ready to copy and paste.
If you’d rather get started than browse the samples, start here.

Turn on JavaScript to choose a color and a shape and get the code. You can also copy the sample code below.

Why use headings#

Headings make your posts easier to read.

They tell readers the main points of the post
They help readers find the information they want quickly
On some services, a table of contents can be made automatically from the headings

Simple heading designs#

Lines above and below#

It’s simple, but a very easy design to use.

Heading with lines above and below (in Japanese)

1
h2{
2
    margin:30px;
3
    padding:12px;
4
    text-align:center;
5
    border-top:1px solid #DDD;
6
    border-bottom:1px solid #DDD;
7
}

Heading with colored lines above and below (in Japanese)

Matching the color of the text and the lines is cute too.

1
h2{
2
    margin:30px;
3
    padding:12px;
4
    color:#F08972;
5
    text-align:center;
6
    border-top:1px solid #F08972;
7
    border-bottom:1px solid #F08972;
8
}

Double lines#

Heading with double lines (in Japanese)

1
h2{
2
    margin:30px;
3
    padding:12px;
4
    text-align:center;
5
    border-top:4px double #DDD;
6
    border-bottom:4px double #DDD;
7
}

Lines on the left and right#

Heading with lines on the left and right (in Japanese)

1
h2{
2
    text-align:center;
3
}
4
h2:before,h2:after {
5
    content:"";
6
    display:inline-block;
7
    width:120px;
8
    height:1px;
9
    margin:0 10px;
10
    background-color: #DDD;
11
    vertical-align: middle;
12
}

Make the margin larger to widen the space between the title and the lines.
You can adjust the length of the lines with width.

Lines of different thickness#

Heading with a thick and a thin line, top and bottom (in Japanese)

1
h2 {
2
    position: relative;
3
    padding: 12px;
4
    text-align:center;
5
}
6
h2:before,h2:after {
7
    position: absolute;
8
    left: 0;
9
    content: '';
10
    width: 100%;
11
    height: 6px;
12
    box-sizing: border-box;
13
}
14
h2:before {
15
    top: 0;
16
    border-top: 2px solid #ddd;
17
    border-bottom: 1px solid #ddd;
18
}
19
h2:after {
20
    bottom: 0;
21
    border-top: 1px solid #ddd;
22
    border-bottom: 2px solid #ddd;
23
}

Heading with the thick and thin lines swapped (in Japanese)

Swapping the thick lines gives it a different feel.

1
h2 {
2
    position: relative;
3
    padding: 12px;
4
    text-align:center;
5
}
6
h2:before,h2:after {
7
    position: absolute;
8
    left: 0;
9
    content: '';
10
    width: 100%;
11
    height: 6px;
12
    box-sizing: border-box;
13
}
14
h2:before {
15
    top: 0;
16
    border-top: 1px solid #ddd;
17
    border-bottom: 2px solid #ddd;
18
}
19
h2:after {
20
    bottom: 0;
21
    border-top: 2px solid #ddd;
22
    border-bottom: 1px solid #ddd;
23
}

A background color#

Heading with a background color (in Japanese)

1
h2 {
2
    position: relative;
3
    text-align:center;
4
    color:#FFF;
5
    padding: 10px;
6
    background-color: #8BC0B8;
7
    box-shadow: 0px 0px 0px 6px #8BC0B8;
8
    border-top: 1px solid #fff;
9
    border-bottom: 1px solid #fff;
10
}

Shifting it a little#

Heading with the background color slightly shifted (in Japanese)

1
h2 {
2
    position:relative;
3
    margin:10px;
4
    display:inline-block;
5
    padding:10px 60px;
6
    border:1px solid #DDD;
7
    background:none;
8
}
9
h2:after {
10
    position: absolute;
11
    top:2px;
12
    left:6px;
13
    content:"";
14
    height:100%;
15
    width:100%;
16
    z-index:-999;
17
    -webkit-transform: rotate(-1deg);
18
    -moz-transform: rotate(-1deg);
19
    background:#FBDDC8;
20
}

Stripes#

Heading with a striped background (in Japanese)

1
h2{
2
    position: relative;
3
    text-align:center;
4
    padding: 10px;
5
    color:#474342;
6
    background: -webkit-repeating-linear-gradient(-45deg, #FBDDC8, #FBDDC8 6px,#F6BCAC 6px, #F6BCAC 12px);
7
    background: repeating-linear-gradient(-45deg, #FBDDC8, #FBDDC8 6px,#F6BCAC 6px, #F6BCAC 12px);
8
}

A striped underline#

Heading with a striped underline (in Japanese)

1
h2 {
2
    position: relative;
3
    padding: 10px;
4
}
5
h2:after {
6
    content: "";
7
    position: absolute;
8
    left: 0;
9
    bottom: 0;
10
    width: 100%;
11
    height: 6px;
12
    background: repeating-linear-gradient(-30deg, #82C5CA, #82C5CA 4px, #C1E2E4 4px, #C1E2E4 8px);
13
}