デザイン

カラーコード変換

HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。

カラーコントラストチェック

文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。

CSS グラデーション作成

線形・放射状グラデーションを見ながら作成。色、位置、角度を調整して CSS をコピーできます。

CSS ボックスシャドウ作成

ずれ、ぼかし、広がり、色、不透明度を調整し、外側・内側の影を確認して CSS を取得できます。

アスペクト比計算

画像や動画の縦横比を約分し、指定した幅・高さからもう一方のサイズを計算します。

CSS Grid ジェネレーター

固定列や自動調整のグリッドを実際の配置で確認し、CSS と HTML を生成できます。

CSS Flexbox ジェネレーター

方向、折り返し、間隔、整列をライブプレビューで試し、対応する CSS と HTML を取得できます。

カラーパレット作成

基準色から補色・類似色・トライアド・単色の配色を作り、HEX、CSS 変数、JSON で保存できます。

CSS 角丸ジェネレーター

四隅の半径を連動・個別に調整し、楕円の角丸もプレビューして border-radius を出力します。

CSS 多角形 clip-path ジェネレーター

頂点をドラッグまたは数値で編集し、多角形の切り抜き形状を確認して CSS を出力します。

CSS ベジェ曲線イージングエディター

2 つの制御点を編集し、動きを試しながら cubic-bezier のイージングを作成できます。

CSS clamp 流動フォントサイズ計算

文字サイズとビューポート幅の上下限から、px・rem 対応の font-size: clamp() を作成します。

CSS 画像フィルタージェネレーター

サンプルや手元の画像でぼかし、明るさ、色、透明度を試し、filter CSS を出力します。

CSS 2D・3D transform ジェネレーター

移動、回転、拡大縮小、傾斜、変形の原点を確認し、必要に応じて遠近感や 3D 変形を加えられます。

用紙サイズと印刷用ピクセル数の計算

A・ISO B・C・北米規格を調べ、向き・解像度・塗り足しからmm、インチ、ポイント、ピクセルを計算します。

SVG最適化・PNG変換

SVGを安全な静止画に整理して最適化。容量と見た目を比較し、SVGまたは指定サイズの透過・単色背景PNGで保存できます。