無料、登録不要|ブラウザ内で直接動作
CSSを書いてくれるデザインツール。
グラデーション、シャドウ、角丸、ファビコンをビジュアルに作成し、仕上がりに満足したらCSSをコピーするかファイルをダウンロード。すべてブラウザ内で完結し、何もアップロードされません。
デザインツール
CSSグラデーションジェネレーター
線形・円形グラデーションを視覚的に作成し、CSSをコピーできます。
ツールを開くボックスシャドウジェネレーター
単一または複数レイヤーのボックスシャドウを視覚的に作成し、CSSをコピーできます。
ツールを開くborder-radiusジェネレーター
角ごとのborder-radiusを視覚的に調整し、CSSをコピーできます。
ツールを開くファビコンジェネレーター
画像を読み込むだけで、必要なすべてのサイズのファビコンを生成します。
ツールを開くカラーパレット抽出ツール
画像から主要な色を抽出します。
ツールを開くコントラストチェッカー
WCAGコントラスト比とAA/AAAの合否を確認できます。
ツールを開くカラーコンバーター
HEX、RGB、HSL、CMYKをリアルタイムに相互変換します。
ツールを開くCSS Clamp()ジェネレーター
最小・最大サイズを設定するだけで、ビューポートに応じてスケーリングする流動的なclamp()の値が得られます。
ツールを開くCSSイージングジェネレーター
2つのハンドルをドラッグしてカスタムのイージング曲線を作り、cubic-bezier()の値をコピーできます。
ツールを開くCSSフィルタージェネレーター
画像をドロップしてスライダーをドラッグし、CSSのfilter値をコピーできます。
ツールを開くCSSパターンジェネレーター
純粋なCSSグラデーションだけでタイル張り可能な背景パターンを作成。画像ファイルは不要です。
ツールを開くSVGブロブジェネレーター
ランダムな有機的ブロブ形状を生成し、ランダム性とポイント数を調整して、コピーまたはダウンロードできます。
ツールを開くノイズテクスチャジェネレーター
密度・不透明度・色を調整できる粒状テクスチャを生成し、ダウンロードまたはCSSとしてコピーできます。
ツールを開くTailwindシャドウジェネレーター
レイヤー化したシャドウを視覚的に作成し、Tailwindのshadow-[...]クラスと生のCSSを取得できます。
ツールを開く