着せ替え用CSS 水色・紫・黒系グラデーションサンプルコード【訂正あり】

ピンクグラデーションを変えたい場合は以下のサンプルコードを参考にアレンジしてみてください。

グラデーションジェネレーターやサンプルグラデーションを教えてくれるサイトもあるのでご活用下さい。
webgradients.com
uigradients.com
jxnblk.com

グラデーションCSSの基本はサルワカさんの記事をどうぞ。
saruwakakun.com

デザインCSSに貼るコード　水色グラデーション

/* 水色グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: -webkit-linear-gradient(left, #84fab0 0%, #8fd3f4 100%);
    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background: -webkit-linear-gradient(30deg, #84fab0 0%, #8fd3f4 100%);
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #8fd3f4;
}

.leave-comment-title {
    border: 1px solid #8fd3f4;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #8fd3f4;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #8fd3f4;
    border-bottom: 1px solid #8fd3f4;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #8fd3f4;
}

紫グラデーションCSS

/* 紫グラデーション着せ替え */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    background: -webkit-linear-gradient(left, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    background: linear-gradient(to right, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(-315deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        background: -webkit-linear-gradient(-315deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        background: linear-gradient(-225deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #D52398;
}

.leave-comment-title {
    border: 1px solid #D52398;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #D52398;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-top: 1px solid #D52398;
    border-bottom: 1px solid #D52398;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #8fd3f4;
    border-left: 4px solid #D52398;
}

黒・グレー系グラデーション

/* グラデーション着せ替え用グレー */
body, .entry-content h3, .categories a, .hatena-module-category .hatena-urllist li a, a.entry-see-more {
    background: -moz-linear-gradient(left, #5d4157 0%, #a8caba 100%);
    background: -webkit-linear-gradient(left,  #5d4157 0%, #a8caba 100%);
    background: linear-gradient(to right, #5d4157 0%, #a8caba 100%);
    /* 背景グラデーション1 */
}

@media only screen and (max-width:1141px) {
    nav#slide-menu, div.menu-trigger {
        background: -moz-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: -webkit-linear-gradient(30deg, #5d4157 0%, #a8caba 100%);
        background: linear-gradient(120deg, #5d4157 0%, #a8caba 100%);
        /* 背景グラデーション2 */
    }
}


/* 文字色 */
a, .leave-comment-title, .hatena-module-title, .hatena-module-title a, .sns-twitter, .sns-facebook, .sns-bookmark, a.sns-bookmark:visited, .sns-googleplus, .sns-pocket, .sns-line, a.sns-link:hover {
    color: #5d4157;
}

.leave-comment-title {
    border: 1px solid #5d4157;
}


/* 見出し */
.entry-content h2 {
    position: relative;
    padding: 0.2em 0.5em;
    border-left: 8px solid #5d4157;
}

.entry-content h4 {
    position: relative;
    padding: .5em;
    color: #5d4157;
    border-top: 1px solid #5d4157;
    border-bottom: 1px solid #5d4157;
}

.entry-content h5 {
    position: relative;
    padding: .5em;
    color: #5d4157;
    border-left: 4px solid #5d4157;
}

コンテンツ部分のグレー背景を変更する

ヘッダー以下のコンテンツ部分のグレー背景の色を変えたい場合は

#content {
    background-color: #fcf5f8;
}

このように記述して背景色を変更して下さい。#fcf5f8のところにお好きな色のカラーコードを入れてデザインCSSに追記すればOKです。

www.colordic.org