css

Implementing Striped Stripes Using CSS3

Shou Arisaka
1 min read
Oct 20, 2025

I updated the site design a bit, so Iโ€™d like to share the CSS I used.

Implementing Striped Stripes

.site-header
background: #009999;
    background-image: -webkit-gradient(linear,0 0,100% 100%, color-stop(.25,#ffffff), color-stop(.25,transparent), color-stop(.5,transparent), color-stop(.5,#ffffff), color-stop(.75,#ffffff), color-stop(.75,transparent),to(transparent));
    -webkit-background-size: 1000px;

You can change the color by modifying the color code fff in the above code.

You can adjust the size of the stripes by changing the value of -webkit-background-size: 1000px;.

Making Elements Semi-transparent

.main-body-in
background-color: rgba(255, 255, 255, 0.7);

Also, since the background being too assertive makes it hard to read, I placed a semi-transparent white sheet in the background. You can change the semi-transparency by tweaking the value of 0.7. 1.0 is opaque.

Share this article

Shou Arisaka Oct 20, 2025

๐Ÿ”— Copy Links