CSSツール
5 toolsCSSボックスシャドウ、アニメーション、グラデーション生成、CSS整形、Tailwindチートシート。
Tool list
CSS の整形・圧縮
雑然とした CSS をきれいに整形したり圧縮したり、ルール数・セレクタ数・メディアクエリ数の集計まで同じ画面で行えます。
Open tool
CSS Box Shadow ジェネレーター
複数レイヤーの inset / outer 影を重ねながらオフセット・ブラー・スプレッド・透明度・角丸を調整し、ライブプレビューで確認できます。CSS / Tailwind クラスで取得可能です。
Open tool
CSS ボーダージェネレーター
辺ごとの線幅、8 種類のスタイル、不透明度付きカラー、角ごとの border-radius を設定し、ライブプレビューで確認できます。CSS / Tailwind で取得可能。
Open tool
CSS フィルタージェネレーター
blur / brightness / contrast / saturate / hue-rotate / grayscale / sepia / opacity / invert / drop-shadow を画像・アバター・カードのプレビューに適用し、CSS / Tailwind で取得できます。
Open tool
CSS アニメーションジェネレーター
フェード・スライド・ズーム・バウンス・回転などのプリセットから keyframe アニメーションを組み立て、duration / easing / delay / iteration / direction / fill-mode を設定して CSS / HTML / React / Vue として書き出します。
Open tool