Tiny Online Tools
デザインツール
プロジェクト向けにグラデーション、影、色、タイポグラフィスタイルを生成できる無料のオンラインCSS・デザインツールです。
ランダムカラーパレット生成ツール
ハーモニールールでランダムなカラーパレットを生成します。
グラデーションジェネレーター
ライブプレビュー付きで CSS グラデーションを視覚的に作成します。
Box Shadow ジェネレーター
CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。
Border Radius ジェネレーター
コーナーの丸みを視覚的にコントロールしてCSSをコピーします。
CSS Clip-Path ジェネレーター
ライブプレビューでCSS clip-path形状を生成します。
カラーコントラストチェッカー
アクセシビリティのためのWCAG 2.1カラーコントラスト比を確認します。
フォントプレビュー
Google Fonts をカスタムテキストとスタイルでプレビューします。
フォントペアジェネレーター
プロジェクト向けのキュレーションされたGoogle Fontsのペアリングを見つけます。
テキストシャドウジェネレーター
ライブプレビュー付きで CSS text-shadow を作成します。
文字間隔ツール
CSS の letter-spacing を調整し、読みやすさと一緒に確認できます。
行間計算ツール
読みやすいタイポグラフィのための最適な行間を計算します。
CSS Grid ジェネレーター
ライブプレビューを見ながらレスポンシブな CSS Grid レイアウトを作成できます。
Flexbox ジェネレーター
ライブプレビューを見ながら柔軟な CSS Flex レイアウトを作成できます。
CSS アニメーションジェネレーター
ライブモーションプレビューを見ながら再利用できる CSS アニメーションを作成できます。
CSS キーフレーム生成ツール
ライブプレビューを見ながら、カスタム CSS キーフレームを視覚的に作成してそのままコピーできます。
CSS グラデーション文字生成ツール
視覚的なコントロールでグラデーション文字スタイルを作成し、ライブプレビューとコピー用 CSS を表示します。
カラーパレット生成ツール
1色のベースカラーから調和のとれたカラーパレットを生成します。
グラデーションパレット抽出ツール
ブラウザ内で画像からグラデーションパレットを抽出します。
HEX → Tailwind 変換ツール
HEX カラーを最も近い Tailwind CSS カラークラスに変換します。
Tailwind カラー生成ツール
ベースカラーから Tailwind CSS のカラースケールを生成します。
CSS 変数生成ツール
カラーやデザイン寸法用の CSS カスタムプロパティ（変数）を生成します。
シャドウパレット生成ツール
UI デザイン用の一貫した階層的な CSS シャドウスタイルを生成します。
グラスモーフィズム生成ツール
グラスモーフィズム UI スタイルの CSS コードを生成します。
ニューモーフィズム生成ツール
ニューモーフィズム UI スタイルの CSS コードを生成します。
グラデーションボーダー生成ツール
グラデーションボーダーの CSS コードを生成します。
アスペクト比計算ツール
画像や動画のアスペクト比を計算・変換します。
ランダムカラーリスト
HEX・RGB・HSL 形式でランダムなカラーリストを生成します。