CSSでグラデーションを背景にしたサンプル12種

 CSSの背景にグラデーションのを使った場合のサンプルを12種類作ってみました。

基本的な記述は、
background:linear-gradient(#色番号,#色番号);
background:linear-gradient(角度方向,#色番号,#色番号);

#開始色 → #終了色で指定。角度方向は180がデフォルトで上から下へ。

 パステルカラーの方が、使いやすいかもしれません。

以下文字入れをしてみたサンプルです。

#d90000,#FFF600のグラデーションで作ったサンプル

 この色合いで作ってみると、白い文字の文章が下の黄色い部分にかかるとやや見えにくくなります。

 linear-gradient(#d90000,#FFF600);で設定しています。

 黄色い部分にかかってしまった白文字。試しに、text-shadowを使って文字に影をつけてみました。

#00bdd9,#0b0bfdでグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章でも問題なく読むことができます。

 linear-gradient(#00bdd9,#0b0bfd);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

#ff00b4,#c0cd31でグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章でも問題なく読むことができます。

 linear-gradient(#ff00b4,#c0cd31);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

90deg,#4eff00,#52c8ffでグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章はやや読みづらいです。文字色を黒にするなど読みやすくするデザインが必要ですね。

 linear-gradient(90deg,#4eff00,#52c8ff);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

#7bff52,#ec14ffでグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章はやや読みづらいです。文字色を黒にするなど読みやすくするデザインが必要ですね。

 radial-gradient(#7bff52,#ec14ff);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

#00a400,#ff9999でグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章は上の部分は読みやすいです。。文字色を黒色にしてみるとこんな感じになります。

 linear-gradient(#00a400,#ff9999);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

90deg,#fccbff,#99f1ffでグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章は読みづらいです。影をつけるか、文字色を黒色にするなど工夫が必要ですね。

 linear-gradient(90deg,#fccbff,#99f1ff);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

45deg,#d2ffcb,#ffc999でグラデーションの色を作ってみたもの

 この色合いで作ってみると、白い文字の文章は読みづらいです。影をつけるか、文字色を黒色にするなど工夫が必要ですね。

 linear-gradient(45deg,#d2ffcb,#ffc999);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

30deg,#3b18cf,#e41af1でグラデーションの色を作ってみたもの

 この色合いで文字色が白でも問題なさそうです。文字色を黒色にしてみました。

 linear-gradient(30deg,#3b18cf,#e41af1);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

#ff4891,#ffa6c8でグラデーションの色を作ってみたもの

 この色合いで文字色が白でも問題なさそうです。文字色を黒色にしてみました。

 linear-gradient(#ff4891,#ffa6c8);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

90deg,#fffc0b,#a6ffacでグラデーションの色を作ってみたもの

 この色合いで文字色が白だとほとんど読めませんね。文字色を黒色だと問題なさそうです。

 linear-gradient(90deg,#fffc0b,#a6ffac);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。

#ffa4a4,#a6e1ffでグラデーションの色を作ってみたもの

 この色合いで文字色が白だと読みづらいです。文字色を黒色だと問題なさそうです。

 linear-gradient(#ffa4a4,#a6e1ff);で設定しています。

 試しに、text-shadowを使って文字に影をつけてみました。