グラデーション作成
リアルタイムプレビュー · 直線·放射 · 方向の調整 · 濁りの比較 · CSS コピー
그라데이션 만들기
배경용 그라데이션을 보면서 만들고 CSS 를 가져갑니다. 가운데가 탁해지지 않게 섞습니다
시작 색
끝 색
방향 135°
모양
비교 — 위가 그냥 섞기, 아래가 눈에 맞춘 섞기
가운데가 #989081 → #b891b5 로 달라집니다. 그냥 섞으면 그만큼 탁해집니다.
背景に使うグラデーションを見ながら作り、CSS をそのまま持ち帰ります。真ん中の色が濁らないように混ぜます。
使い方
- 始めの色と終わりの色を書く
- 向きと形を選ぶ
- 比較の帯でくすみの差を見る
- CSS をコピーして貼る
よくある質問
- 「真ん中がくすまないように混ぜる」とは何ですか？
- 2色をそのまま混ぜると真ん中がくすみます。青から黄色へ行くとき中間が灰色を通るのが代表例です。画面の色の値は目に見える明るさに比例しないためで、そのゆがみを取り除いてから混ぜるとそれが起きません。比較の帯で2つの方式を並べて見られます。
- 「段階を増やしてなめらかに」はいつ入れますか？
- 広い背景に使うときに入れると帯が目立たなくなります。中間の色をいくつも挟む方式なので CSS が長くなります。
- コピーした CSS はどこに入れますか？
- その要素の background に入れてください。コピーした値には background: まで入っています。
ほかの道具
この端末の中だけ 入力した内容はブラウザの中だけで処理され、どこにも保存・送信されません。
このツールが入力をどこへ送るかは、上のバッジに書いてあります。 道具の一覧 · KarmoLab · 作った人 · AI と一緒に作っています。 ソースを見る