Presets

Animation Properties

1s

0s

Live Preview

CSS
<div class="speed-row">
  <span>Speed</span>
  <input type="range" id="speed-ctrl" min="0.25" max="4" step="0.25" value="1">
  <span id="lbl-speed">1×</span>
</div>

<div class="preview-controls">
  <button class="ctrl-btn btn-play"  id="btn-play">&#9654; Play</button>
  <button class="ctrl-btn btn-pause" id="btn-pause">&#10074;&#10074; Pause</button>
  <button class="ctrl-btn btn-reset" id="btn-reset">&#8635; Reset</button>
</div>

Keyframe Editor

Generated CSS

Build Flexbox layouts → CSS Flexbox Generator Generate gradients → CSS Gradient Generator Create box shadows → CSS Box Shadow Generator