🌈グラデーション作成
色と角度を選ぶだけで、CSS の linear-gradient / radial-gradient を作ります。3色以上のグラデーションや、Tailwind CSS のクラスでの出力にも対応しています。
角度の目安
| 角度 | 向き |
|---|---|
| 0deg | 下から上 |
| 90deg | 左から右 |
| 135deg | 左上から右下 |
| 180deg | 上から下 |
よくある質問
- Q. CSSでグラデーションを作るには？
- background: linear-gradient(角度, 色1, 色2); と書きます。例：linear-gradient(135deg, #6366F1, #EC4899)
- Q. 3色のグラデーションにするには？
- 色をカンマで3つ並べます。位置を % で指定すると、色が変わる場所を調整できます。
- Q. 文字にグラデーションをかけるには？
- background にグラデーションを指定し、background-clip: text と color: transparent を組み合わせます。
- Q. Tailwind CSSでは？
- bg-gradient-to-r from-indigo-500 to-pink-500 のように書きます。任意の色は from-[#6366F1] の形で指定できます。