CSS グラデーション透明度ジェネレーター
オンラインで CSS 線形グラデーションコードを生成します。グラデーション方向、色、透明度などのパラメータを設定でき、コードのプレビューとコピー機能を提供し、思い通りのグラデーション効果をすばやく簡単に作成できます。
副題
1. グラデーション方向の設定:
- 8 つの事前設定された方向をサポート（上、下、左、右、左上、右上、左下、右下）
- カスタム角度のサポート (0 ～ 360 度)
2. 色と透明度の設定:
- 複数のカラーノードの追加をサポート
- カラーノードごとに色値を個別に設定可能 (HEX、RGB、RGBA)
- カラーノードごとに透明度を個別に設定可能 (0 ～ 100%)
3. コードのプレビューとコピー:
- 生成された CSS コードの効果をリアルタイムでプレビュー
- ワンクリックで生成された CSS コードをコピー
4. その他の機能:
- すべてのパラメータのリセットをサポート
- シンプルで使いやすいインターフェースデザイン
- プログラミングの知識がなくても使用可能
HTML コード例
<div class="gradient"></div>
CSS コード例
.gradient {
width: 300px;
height: 100px;
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
パラメータの説明
| パラメータ | 説明 |
|---|---|
| 方向 | グラデーションの方向を指定します。事前設定値またはカスタム角度を使用できます。 |
| カラーノード | グラデーション内の色を定義します。各カラーノードには、色値と透明度があります。 |
参考文献
よくある質問
1. 生成された CSS コードをどのように使用しますか？
生成された CSS コードをコピーして、Web ページの CSS ファイルまたは <style> タグに貼り付けます。
2. グラデーションの色や透明度を調整するにはどうすればよいですか？
カラーピッカーと透明度スライダーを使用して、各カラーノードの色と透明度を調整できます。
3. カスタマイズしたグラデーションを保存するにはどうすればよいですか？
現在、カスタマイズしたグラデーションを保存する機能はありません。生成された CSS コードをコピーして、ローカルに保存することをお勧めします。