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

スタイルをコピー