色、グラデーション（CSS）

前書き

HTMLコーディングに使える、色、グラデーションに関する小技を掲載しています。

目次

1. 透明度
2. グラデーション
3. 参考

透明度

透明度の指定

div{
  background: rgba(#000,0.5);
}

div{
  background: rgba(0,0,0,0.5);
}

グラデーション

基本

div{ /* 線（ぼかし） */
  background-image: linear-gradient(to right, #e7d4e3 0%, #a675a5 100%);
}
div{ /* 円（ぼかし） */
  background-image: radial-gradient(circle, #e7d4e3 0%, #a675a5 100%);
}
div{ /* 円錐（ぼかし） */
  background-image: conic-gradient(#e7d4e3 0%, #a675a5 100%);
}
div{ /* 線（くっきり） */
  background-image: linear-gradient(to right, #e7d4e3 0% 50%, #a675a5 50% 100%);
}
div{ /* 円（くっきり） */
  background-image: radial-gradient(circle, #e7d4e3 0% 50%, #a675a5 50% 100%);
}
div{ /* 円錐（くっきり） */
  background-image: conic-gradient(#e7d4e3 0% 50%, #a675a5 50% 100%);
}

縞しま模様 （ストライプ）

div{ /* 3色 */
  background-image: repeating-linear-gradient(-45deg, transparent 0px 10px ,#e7d4e3 10px 20px, #a675a5 20px 30px);
}
div{ /* 破線 */
  background-image: repeating-linear-gradient(90deg, #a675a5 0px 10px, transparent 10px 20px);
  background-size: 100% 5px;
  background-position: bottom left;
  background-repeat: repeat-x;
    /* 別の書き方
    background-image: linear-gradient(90deg, #a675a5 0px 10px, transparent 10px 20px);
    background-size: 20px 5px;*/
}

水玉模様 （ドット）

div{ /* 2色の水玉 */
  background-image:
    radial-gradient(circle, #e7d4e3 5px, transparent 6px), /* 半径6pxの円（端が尖るので1pxぼかしている） */
    radial-gradient(circle, #a675a5 5px, transparent 6px);
  background-size: 28px 28px; /* 余白の調整 */
  background-position: 0 0, 14px 14px; /* 位置の調整 */
}
div{ /* 点線 */
  background-image: radial-gradient(circle, #a675a5 3px, transparent 4px);
  background-size: 16px 8px;
  background-position: bottom left;
  background-repeat: repeat-x;
}

市松模様、風車模様

div{ /* 市松模様 */
  background-image: repeating-conic-gradient(from 0deg,#e7d4e3 0% 25%, #a675a5 25% 50%);
  background-size: 40px 40px;
}
div{ /* 風車模様 */
  background-image: repeating-conic-gradient(from 0deg,#e7d4e3 0% 12.5%, #a675a5 12.5% 25%);
  background-size: 40px 40px;
}

下線、強調

span{ /* 下線 */
  text-decoration: underline #a675a5;
}
span{ /* 波線 */
  text-decoration: underline wavy #a675a5;
}
span{ /* 点線 */
  text-decoration: overline dotted #a675a5;
}
span{ /* 強調1 */
  text-emphasis: sesame #a675a5;
}
span{ /* 強調2 */
  text-emphasis: circle #a675a5;
}
span{ /* マーカー 単色 */
  background-image: linear-gradient(transparent 60%, #e7d4e3 60%);
}
span{ /* マーカー グラデーション */
  background-image: linear-gradient(to right,#a675a5 0%, #e7d4e3 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: left bottom;
}

その他

div{ /* 円グラフ */
  background-image:
    radial-gradient(circle,#fff 0% 40%, transparent 40.5% 100%),
    conic-gradient(#a675a5 0% 60%, #e7d4e3 60% 90% ,#eee 90% 100%);
  border-radius: 50%;
}
div{ /* 毀滅の刃 */
  background-image:
    radial-gradient(circle at 50% 135%,#a675a5 0% 50%, transparent 50.2% 100%),
    radial-gradient(circle at 50% 20%,#a675a5 0% 15%, transparent 15.2% 100%),
    repeating-conic-gradient(from -3.6deg at 50% 20%,#a675a5 0% 2%, #e7d4e3 2.2% 4.8%,#a675a5 5% );
}

参考

Chromeの最新機能が楽しいぞ! CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA

関連記事

CSSで文字に光彩のような効果を加える

文字に簡単な動きをつける（HTML/CSS/JS）

マスク、クリップパス（CSS）