Tiny Online Tools
毎回ゼロから書かなくても再利用しやすい動きを作成
CSS アニメーションは便利ですが、duration、delay、direction、easing、繰り返し回数を手で詰めるのは手間がかかります。このジェネレーターなら、まず見た目で調整してからコードをコピーできます。
こんなときに便利です
マイクロインタラクションの試作、timing の比較、プロジェクト内での動きの統一に向いています。生成後は、そのアニメーションが UI を助けているかも確認しておくと安心です。
CSS アニメーションジェネレーター
ライブモーションプレビューを見ながら再利用できる CSS アニメーションを作成できます。
動く
css関連ツール
CSS キーフレーム生成ツール
ライブプレビューを見ながら、カスタム CSS キーフレームを視覚的に作成してそのままコピーできます。
CSS Grid ジェネレーター
ライブプレビューを見ながらレスポンシブな CSS Grid レイアウトを作成できます。
CSS Clip-Path ジェネレーター
ライブプレビューでCSS clip-path形状を生成します。
CSS グラデーション文字生成ツール
視覚的なコントロールでグラデーション文字スタイルを作成し、ライブプレビューとコピー用 CSS を表示します。
エッジ検出ツール
Sobel エッジ検出で画像のエッジと輪郭を強調。閾値調整と反転オプション、完全にブラウザで動作。
SVG ドットグリッドパターン
カスタムドットサイズ、間隔、色、オプションの千鳥配置を備えたクリーンな SVG ドットグリッドパターンを生成します。背景、ノート、UI デザイン、装飾テクスチャに最適です。
YAMLフォーマッター
インデントやキーの並び替えを設定して YAML を整形・可読化します。
もっと見る
無料オンラインツールの全コレクションを見る。