グラデーション作成で最も多いミスは、色の組み合わせの相性を考慮しないことです。彩度の高い色同士を組み合わせると、中間色がくすんだ印象になることがあります。色相環で近い色(類似色)や対岸の色(補色)を意識すると、より美しく調和したグラデーションが作れます。
カラーストップの位置が近すぎると、色の変化が不自然になります。特に2色のコントラストが高い場合、急激な変化がストライプのように見えることがあります。滑らかなグラデーションを作りたい場合は、カラーストップの間に十分な余裕を持たせてください。
CSSコードの記述ミスもよくある問題です。gradient関数の前にbackground-imageを指定すべきところ、background shorthandにまとめてしまい、他のbackgroundプロパティを上書きしてしまうケースがあります。また、最後のカラーストップの後にカンマを付けてしまうと構文エラーになります。CSSコードページで正しい記述方法を確認しましょう。