CSS Filter Generator

Adjust sliders to create filter effects and copy the CSS instantly. Drag & drop an image or paste a URL to use your own photo.

Live Preview

<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="Preview" />
  <img id="cf-before-img" class="cf-before-img" alt="Before" />
  <div class="cf-compare-label cf-label-before">Before</div>
  <div class="cf-compare-label cf-label-after">After</div>
  <div class="cf-divider-line"></div>
  <div class="cf-drop-overlay">Drop image here</div>
</div>

<div class="cf-upload-bar">
  <input type="text" class="cf-url-input" id="cf-url-input" placeholder="Paste image URL and press Enter…" />
  <button class="cf-btn cf-btn-sm" id="cf-load-url-btn">Load</button>
  <label class="cf-btn cf-btn-sm" style="cursor:pointer;">
    Upload
    <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">Copy</button>
</div>

Filter Controls

<div class="cf-filter-list" id="cf-filter-list">
  <!-- Filters rendered by JS -->
</div>

<div class="cf-presets-section">
  <div class="cf-presets-label">Presets</div>
  <div class="cf-presets-grid" id="cf-presets-grid">
    <!-- Presets rendered by JS -->
  </div>
</div>

Generate gradients → CSS Gradient Generator Check color contrast → Color Contrast Checker Resize images → Image Resizer