🎨 デザインとCSS

🌟

ファビコン作成

1枚の画像から最新ブラウザ・スマホ対応のファビコンを一括生成します。

ライブ
🌈

CSSグラデーション

視覚的な操作で美しいCSSグラデーションコードを自動生成します。

ライブ
🃏

box-shadowジェネレーター

直感的な操作でCSSのドロップシャドウを作成し、コードをコピーできます。

ライブ

border-radius ジェネレーター

複雑な角丸や有機的なBlobシェイプのCSSコードを直感的に生成します。

ライブ
🔍

コントラストチェッカー

テキスト色と背景色のコントラスト比を計算し、WCAG基準の達成度を判定します。

ライブ
🎨

カラーパレット作成

1つの基準色から調和のとれた5種類の配色パターンを自動生成します。

ライブ
🔢

HEX RGB 変換

HEX、RGB、HSLの各種カラーコードを相互に変換します。

ライブ
🫧

Blobジェネレーター

ウェブデザイン向けのランダムな有機的シェイプ(Blob)を作成・取得します。

ライブ
🌊

SVG波ジェネレーター

Webサイトのセクションを区切る波形SVGコードを作成します。

ライブ
✂️

clip-path生成

マウス操作で直感的にCSSのclip-path(polygon)コードを作成できるツールです。

ライブ
📈

cubic-bezier 生成

CSSアニメーションのイージング曲線を視覚的に作成・プレビューします。

ライブ
🎬

CSSアニメーション作成

カスタマイズ可能なCSSキーフレームアニメーションを生成し、コードをコピーします。

ライブ
🏷️

メタタグ生成

SEOやSNS向けのメタタグとOGPをプレビューしながら作成します。

ライブ
🔤

フォントプレビュー

手元のフォントファイルやシステムフォントをブラウザ上で安全にテストします。

ライブ
🧊

グラスモーフィズム生成

すりガラス風のCSSコード(グラスモーフィズム)を直感的に作成します。

ライブ