CSS tape

Back to list

This lets you get a pretty convincing tape effect without using images. It might not be advanced enough if you go really hard on skeuomorphism, but for my purposes it works fine!

I yanked this directly from my own CSS, so you will likely need to fudge the margins and such.

Demo

This box has tape on it!

Code

:root {
    --tape-gray: #dbd8be;
    --tape-edge-gray: #b7b49d;
}

.tape::before {
    content:"";
    display:block;
    height: 30px;
    margin:-28px auto 5px auto;
    width: 200px;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.5;
    box-shadow:0.5px 0.5px 1px rgb(0,0,0,0.2);
}