CSSフィルタージェネレーター

スライダーを動かしてフィルターエフェクトを作成し、CSSをそのままコピーできます。画像をドラッグ＆ドロップするか、URLを貼り付けてご自身の画像でお試しください。

ライブプレビュー

<div class="cf-image-wrapper" id="cf-image-wrapper">
  <canvas id="cf-default-canvas" style="display:none;"></canvas>
  <img id="cf-preview-img" class="cf-preview-img" alt="プレビュー" />
  <img id="cf-before-img" class="cf-before-img" alt="適用前" />
  <div class="cf-compare-label cf-label-before">適用前</div>
  <div class="cf-compare-label cf-label-after">適用後</div>
  <div class="cf-divider-line"></div>
  <div class="cf-drop-overlay">ここに画像をドロップ</div>
</div>

<div class="cf-upload-bar">
  <input type="text" class="cf-url-input" id="cf-url-input" placeholder="画像URLを貼り付けてEnterキーを押す…" />
  <button class="cf-btn cf-btn-sm" id="cf-load-url-btn">読込</button>
  <label class="cf-btn cf-btn-sm" style="cursor:pointer;">
    アップロード
    <input type="file" id="cf-file-input" accept="image/*" style="display:none;" />
  </label>
</div>

<div class="cf-output-panel">
  <span class="cf-css-code" id="cf-css-output"><span class="cf-css-prop">filter</span>: <span class="cf-css-val" id="cf-css-val-span">none</span>;</span>
  <button class="cf-copy-btn" id="cf-copy-output-btn">コピー</button>
</div>

フィルター設定

<div class="cf-filter-list" id="cf-filter-list">
  <!-- JSで描画 -->
</div>

<div class="cf-presets-section">
  <div class="cf-presets-label">プリセット</div>
  <div class="cf-presets-grid" id="cf-presets-grid">
    <!-- JSで描画 -->
  </div>
</div>

関連ツール

グラデーション作成 → CSSグラデーションジェネレーター 色のコントラスト確認 → カラーコントラストチェッカー 画像をリサイズ → 画像リサイザー

📄

freee で経理・請求書を自動化しよう

フリーランス・中小企業向けのクラウド会計ソフト。銀行口座・クレカと自動連携で、確定申告もラクラク。30日間無料トライアル実施中。

無料で試す