CSSデコ盛りジェネレーター

コードを書かずに視覚的にCSSの装飾やアニメーションを調整し、コピペで使えるコードを出力します。

装飾設定

パーツプリセット

背景タイプ

カラー 1

カラー 2

不透明度 (Opacity)1

角度 (Linearのみ)90deg

パーツプリセット

角丸 (border-radius)0px

枠線の太さ (px)

スタイル

カラー

パーツプリセット

X軸 (水平)0px

Y軸 (垂直)0px

ぼかし (Blur)0px

広がり (Spread)0px

影の色

不透明度0.2

パーツプリセット

X軸 (水平)0px

Y軸 (垂直)0px

ぼかし (Blur)0px

影の色

パーツプリセット

フォントの種類

文字サイズ3em

文字の縁取り (Text Stroke)

縁取りの太さ0px

縁の色

グラデーション文字

文字をグラデーションにする

有効にすると、基本の「文字色」や「背景」の設定より優先され、背景は文字の形に切り抜かれます。

パーツプリセット

ぼかし (Blur)0px

明るさ (Brightness)100%

コントラスト (Contrast)100%

彩度 (Saturate)100%

グレースケール0%

色相回転 (Hue-rotate)0deg

パーツプリセット

すりガラス効果（backdrop-filter）を効かせるには、「背景」タブで背景の不透明度を下げておく必要があります。

要素全体の不透明度 (opacity)1

背面のぼかし (backdrop-blur)0px

背面の明るさ (backdrop-brightness)100%

背面のコントラスト (backdrop-contrast)100%

パーツプリセット

遠近感 (perspective)0 (none)

移動 X (translateX)0px

移動 Y (translateY)0px

拡大縮小 (scale)1

個別 X (scaleX)1

個別 Y (scaleY)1

回転 (rotate Z)0deg

3D X軸回転 (rotateX)0deg

3D Y軸回転 (rotateY)0deg

傾斜 X (skewX)0deg

傾斜 Y (skewY)0deg

パーツプリセット

トランジション (変化の滑らかさ)

時間 (Duration)0s

イージング

ホバー時 (Hover)

マウスホバー時のアクションを有効にする

常時アニメーション (Keyframes)

プレビュー

Sample

コード出力

マッハーツールについて

インストール不要で誰でもすぐに使える、無料のオンラインツール集

マッハーツールの目的は、日々の繰り返し作業や、たまにしか使わないけれど設定が面倒な作業を、シンプルで直感的なツールによってマッハで解決することです。会員登録も必要ありません。ブックマークしておけば、必要な時にいつでもアクセスして作業を効率化できます。ダークモードにも対応しており、お好みの表示で快適にご利用いただけます。

CSSデコ盛りジェネレーター

全体装飾プリセット

背景 (Background)

角丸・枠線 (Border)

ボックスシャドウ (box-shadow)

テキストシャドウ (text-shadow)

テキスト・フォント (Typography)

文字の縁取り (Text Stroke)

グラデーション文字

フィルター (Filter)

透明度・すりガラス (Backdrop)

変形 (Transform)

アニメ＆ホバー (Animation)

トランジション (変化の滑らかさ)

ホバー時 (Hover)

常時アニメーション (Keyframes)