IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【CSS】背景パターン --サンプル集-- | 【WEBデザイン】

投稿日:2019/07/19

CSSだけでできる柄物の背景を、備忘録として書き記している記事です。

 

 

ドット柄

ドット柄を表現できる背景色のCSS一覧

 

緑-水玉(濃緑) HTML CSS JS
 
<div class="style1"></div>
.style1{
    background-color: #04bd41; 
    background-image: linear-gradient(45deg, #00ad39 25%, #04bd41 25%,transparent 75%, #04bd41 75%);
    background-size: 10px 10px;
    background-position: 0px 0px,3px 3px;
}
 

 

 

光沢

光沢のある背景色のCSS一覧

 

HTML CSS JS
 
<div class="style2"></div>
.style2{
    background-image: linear-gradient(45deg, #716eff,#5a4dc6 , #b5e9e2 , #3c4dd5);
    background-size: 100%;
    background-position: 0px 0px,13px 13px;
}
 

 

HTML CSS JS
 
<div class="style3"></div>
.style3{
    background-image: linear-gradient(45deg, #d06666,#fd0000 , #ffcce8 , #ff1d1d);
    background-size: 100%;
    background-position: 0px 0px,13px 13px;
}