IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【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;
}
 
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;

 

カーボン素材風 HTML CSS JS
 
<div class="style4"></div>
.style4{
    background-color: #333; 
    background-image: linear-gradient(45deg, #3a3a3a 25%, #3e3e3e 25%,transparent 75%, #444444 75%);
    background-size: 5px 5px;
    background-position: 0px 0px,3px 3px;
}
 
background-color: #333; 
background-image: linear-gradient(45deg, #3a3a3a 25%, #3e3e3e 25%,transparent 75%, #444444 75%);
background-size: 5px 5px;
background-position: 0px 0px,3px 3px;

 

HTML CSS JS
 
<div class="style5"></div>
.style5{
    background-color: #1e73be; 
    background-image: linear-gradient(45deg,#767aff 25%,#120073 25%,transparent 75%,#09083c 75%);
    background-size: 5px 5px;
    background-position: 0 0,3px 3px;
}
 
background-color: #1e73be; 
background-image: linear-gradient(45deg,#767aff 25%,#120073 25%,transparent 75%,#09083c 75%);
background-size: 5px 5px;
background-position: 0 0,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;
}
 
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;
}
 
background-image: linear-gradient(45deg, #d06666,#fd0000 , #ffcce8 , #ff1d1d);
background-size: 100%;
background-position: 0px 0px,13px 13px;