CSSで上下を透過グラデーションさせる方法を知りたいです

Question

下図のように、水色の四角の上下を透過グラデーションさせるような書き方をご存知ありませんでしょうか？

Comments

[退会済みユーザー]

matsuzakaq もとい dadanda もとい kujiran もとい ajinomoty　祖国にプログラミングの質問サイトは無いのか？

[yoshinavi]

まずは、自分で調べたり、実行したコードと問題点を提示してください。

Answer 1

まあ丸投げは変わらないけど

要素 {
background: linear-gradient(方向, 開始色 開始位置, 追加色 追加する位置, 終了色 終了位置);
}

参考サイト

Comments

[EggBenedict]

linear-gradientはそのような対応関係でしたか！
目から鱗です。どうもありがとうございます。

ほぼ質問はクリアできました。（透過すると見にくいので省略しました。）
background: linear-gradient(to top, lightblue, blue, lightblue);

ところで、真ん中の blue をギュっと縮めて狭くすることはできませんでしょうか？

[退会済みユーザー]

%で指定することが可能です。

[EggBenedict]

ありがとうございます。