デザインとCSS
CSS を視覚的に生成:シャドウ、グラデーション、Flexbox・Grid レイアウト、アニメーション、カラーパレット
ボックスシャドウやテキストシャドウ、グラデーションやメッシュグラデーション、Flexbox と Grid レイアウト、角丸、clip-path、フィルター、トランスフォーム、アニメーション、グラスモーフィズムやニューモーフィズムの効果を、見ながら作ってコードをコピーできます。カラーパレットや濃淡の生成ツールで統一感のある配色を作り、SVG の波・ブロブ・パターン生成ツールで軽量な背景を作成できます。
このカテゴリのツール数:18
まずはここから
このカテゴリのすべてのツール
-
CSSアニメーションジェネレーター
プリセットまたは独自のキーフレームからCSSの@keyframesアニメーションを作成します。再生時間、遅延、繰り返し、方向、フィルモード、cubic-bezier曲線を設定できます。
-
角丸ジェネレーター
角ごとに独立した値、楕円のX/Y半径、pxや%の単位、ブロブのプリセットに対応した、CSSのborder-radiusを生成します。最短で有効な省略記法を出力します。
-
クリップパスジェネレーター
CSSのclip-path形状を作成します。ドラッグできる点とプリセット付きの多角形、円、楕円、角丸付きのinsetに対応。ライブプレビューでコードをコピーできます。
-
カラーパレットジェネレーター
ベースカラーから、補色、類似色、トライアド、テトラード、スクエア、モノクロマティックの配色ルールでカラーパレットを生成します。ロックしてCSSやTailwindにエクスポートできます。
-
カラーシェードジェネレーター
1つの色から、Tailwind風の50–950スケールと、ティント、シェード、トーンを作ります。OKLCHとsRGBで計算し、CSS変数、Tailwind、JSONにエクスポートできます。
-
CSS box-shadowジェネレーター
CSSのbox-shadowを視覚的に作成します。複数レイヤーの重ね、オフセット、ぼかし、広がり、inset、RGBAの不透明度に対応し、ライブプレビューで見ながらコードをコピーできます。
-
CSS Flexboxジェネレーター
flex-direction、wrap、justify-content、align-items、gapと、アイテムごとのflex、order、align-selfを視覚的に設定します。子要素のライブプレビューとコピー可能なCSS付きです。
-
CSSグラデーションジェネレーター
ドラッグできるカラーストップ、角度、繰り返しモード、OKLCH補間に対応した、線形・放射・円錐のCSSグラデーションを設計します。ライブプレビューで確認し、コードをコピーできます。
-
CSS Gridジェネレーター
CSS Gridレイアウトを視覚的に作成します。grid-template-columns/rows、検証付きの名前付きエリア、gap、揃え、アイテムごとの配置に対応し、きれいなCSSをコピーできます。
-
CSSフィルタージェネレーター
サンプル画像や手持ちの画像に、blur・brightness・contrast・grayscale・sepiaなどのCSS filter関数を組み合わせて適用し、結果をプレビューしてコードをコピーできます。
-
グラスモーフィズムジェネレーター
backdrop-filterのぼかしと彩度、ティントカラーと不透明度、枠線、影を使ったすりガラス風のCSSを生成します。Safari向けの-webkit-プレフィックスも出力します。
-
メッシュグラデーションジェネレーター
重ねた放射グラデーションで、やわらかなメッシュ風のCSS背景を作ります。カラーポイントのドラッグ、広がりの設定、シードによるランダム生成に対応し、純粋なCSSコードをコピーできます。
-
ニューモーフィズムジェネレーター
ソフトUI(ニューモーフィズム)のCSSを生成します。ベースカラーから導く明暗の影、フラット・凹型・凸型・押し込みの形状、4方向の光源に対応します。
-
CSSパターンジェネレーター
ドット、水玉、ストライプ、市松模様、グリッド、ジグザグ、十字グリッドのCSS背景パターンを、色・タイルサイズ・太さを指定して作成。画像ファイルは不要です。
-
SVGブロブジェネレーター
アンカーポイント数・ランダムさ・シードを調整して、なめらかな有機的SVGブロブを作成。単色・グラデーション・輪郭の塗りに対応し、.svg保存やCSS data URIコピーもできます。
-
SVGウェーブジェネレーター
なめらか・ギザギザ・階段状のSVGウェーブを、レイヤー数・振幅・シードを指定して生成。.svgで保存、またはセクション区切り用のCSS背景data URIとしてコピーできます。
-
テキストシャドウジェネレーター
複数レイヤーのCSS text-shadow効果(グロー、縁取り、レトロな3D、エンボス文字)を作成します。自分のテキストでライブプレビューでき、コードもコピーできます。
-
CSS transformジェネレーター
平行移動・回転・拡大縮小・傾斜に加え、3Dの奥行きや軸回転にも対応したCSS transform値を、変形の原点の指定とライブプレビュー付きで生成します。
その他のカテゴリ
- CRC エラー検出のための巡回冗長検査アルゴリズム
- MD メッセージダイジェストアルゴリズム(MD2、MD4、MD5)
- SHA-1 セキュアハッシュアルゴリズム1 - 160ビットハッシュ関数
- SHA-2 セキュアハッシュアルゴリズム2ファミリー(SHA-224、SHA-256、SHA-384、SHA-512)
- SHA-3 Keccakベースのセキュアハッシュアルゴリズム3
- Keccak Keccak暗号化ハッシュ関数
- SHAKE 拡張可能出力関数(SHAKE128、SHAKE256)
- cSHAKE カスタマイズ可能なSHAKE関数
- KMAC Keccakメッセージ認証コード
- パスワードとセキュリティ パスワード生成、分析、ハッシュ化、セキュリティツール
- 暗号化 共通鍵・公開鍵暗号、HMAC、鍵生成(AES、3DES、RSA、PGP)
- エンコーディング データのエンコードとデコード:Base64、Base32、Base58、URL、HTML エンティティ、16 進数、Unicode など
- フォーマッター コードとデータの整形・圧縮・検証(JSON、XML、YAML、SQL、HTML、CSS)と命名スタイルの変換
- ジェネレーター ID、キー、テストデータ、QR コード、バーコード、設定ファイルを生成(UUID、API キー、.gitignore、Dockerfile)
- コンバーター データ形式、進数、色、タイムスタンプ、単位、通貨の変換(JSON、CSV、YAML、XML)
- テキストツール テキストのカウント・比較・整形・変換(文字数、差分、正規表現、大文字小文字、重複削除)
- 画像ツール 画像を操作および変換するためのツール(圧縮、サイズ変更、変換)
- Webツール Web 開発と SEO のためのツール(JWT、URL、DNS、HTTP ヘッダー、meta タグ、サイトマップ)
- 数学・計算ツール お金、健康、パーセント、プログラマー向け計算、日常の数学のための計算ツール
- 時間と日付 タイムゾーン、日付の差、営業日、タイマー、ストップウォッチ、世界時計