コンテンツへスキップ
uencoder

CSS グラデーションジェネレーター

Generate CSS gradient code for linear, radial, and conic gradients with custom angles and color stops。無料、プライベート、100%クライアントサイド。

例を試す:
Local only

最近の履歴

履歴はまだありません

使い方

  1. Set the gradient type, angle, and two colors in the parameters.
  2. Optionally add extra color stops.
  3. Copy the generated CSS code into your stylesheet.

このツールを使うタスク

CSS を Sass/SCSS に変換する
Sass は CSS を変数、ネスト、mixin、関数で拡張します。プレーンな CSS を SCSS に変換して、これらの機能を段階的に使い始めましょう。
タスク
CSS を圧縮・整形する
本番環境向けに CSS を圧縮し(空白・コメントの削除、ルールの統合)、デバッグ用に圧縮済み CSS を整形します。
タスク

よくある質問

What gradient types are supported?
Linear gradients (with custom angle), radial gradients (circular), and conic gradients (with custom starting angle) are all supported.
Can I add more than two color stops?
Yes. Use the stops parameter to add additional color stops (e.g. '#ffff00 50%, #00ff00 75%').

関連ツール

カラーパレットジェネレーター
Generate color palettes from a base color: complementary, analogous, triadic, tetradic, or monochromatic schemes。無料、プライベート、100%クライアントサイド。
ツール
カラーコンバーター
Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。
ツール
カラーミキサー
Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。
ツール