Design generator– category –
背景画像にストライプや水玉模様を作成するCSSや、グラデーションなどを作成できるCSSジェネレーター
-
画像加工が簡単!CSSフィルタージェネレーターでエフェクトを自在に調整
CSSフィルタージェネレーターとは? 「CSSフィルタージェネレーター」は、CSSのfilterプロパティを使った画像加工をリアルタイムで試せるツールです。ぼかし、明るさ、コントラスト、色相回転、影付けなど、さまざまなエフェクトを直感的に調整できます。作成したフィルターのCSSコードをそのままコピーして、Webサイトやブログに適用できます。 CSS Filter Generator ぼかし (px): 0px 明るさ (%): 100% コントラスト (%): 100% グレースケール (%): 0% セピア (%): 0% 彩度 (%): 100% 色相回転 (°): 0° 反転 (%)... -
背景に水玉柄(縦一列・レンガ型)が作れるCSSジェネレーター
Polka Dot Background Generator Preview 配置スタイル レンガ型 一列型 水玉のサイズ (px) 10px 水玉の間隔 (px) 30px 水玉の色 #3cb7ec 背景色 #fdffdb CSS Code Copy CSS 使い方 1. 水玉の配置を選ぶ 「水玉の配置」をラジオボタンで選択すると、プレビューが即座に更新されます。 縦一列(水玉が縦方向に整列) レンガ型(水玉が交互に配置される) 2. 水玉のサイズと間隔を調整 スライダーで 水玉のサイズ と 水玉同士の間隔 を調整できます。 水玉のサイズ (px) … 水玉(ドット)の大き... -
背景にストライプ柄(縦・横・斜め)が作れるCSSジェネレーター
Stripe Background Generator Preview CSS Code Copy CSS ストライプの方向 縦線 (90°) 横線 (0°) 斜線 (右下 -45°) 斜線 (左下 45°) ストライプの幅 (px) 10px カスタム角度 (°) -45° ストライプの色 #ffae00 背景色 #fce6ba このジェネレーターを使えば、CSSだけで背景にストライプ柄を簡単に作成できます!横線・縦線・斜め線を選択し、線の太さ・間隔・色・角度 などをカスタマイズできるので、好みのデザインを簡単に設定できます。 ストライプ柄ジェネレーターとは? CSSの linear-gra... -
三角形を自動で作るCSSジェネレーター アイコン作成に便利!
Preview CSS Code Copy CSS 方向 右向き 左向き 上向き 下向き モード 正三角形 カスタムサイズ サイズ (px): 50px 幅 (px): 50px 高さ (px): 50px カラーの変更 #000000 「三角形を自動で作るCSSジェネレーター アイコン作成に便利!」は、CSSだけでさまざまな三角形を簡単に生成できる便利なツールです。WebデザインやUI/UXデザインでよく使われる三角形のアイコンや装飾を、直感的にカスタマイズしてコードを取得できます。 このツールを使えば、次のような場面で役立ちます ナビゲーションメニューの矢印アイ... -
作成されたグラデーションを選んで編集 CSSグラデーションジェネレーター
レッド系 ブルー系 グリーン系 オレンジ系 パープル系 ブラウン系 日本の伝統色 ゴールド系 ボタン色(CTA) 角度 (°)は、-180~180度を指定 0° 色1: #ff7eb3 色2: #ff758c CSSコード background: linear-gradient(45deg, #ff7eb3, #ff758c); CSSをコピーする -
Webでよく使われるプリセットから選んでカスタマイズできるボーダーデザインジェネレーター
プレビューエリア Solid Dashed Dotted Double Groove Ridge Inset Outset Radius Rounded Dotted Rounded Dashed ボーダー幅 (px): ボーダーカラー: ボーダースタイル: Solid Dashed Dotted Double Groove Ridge Inset Outset ボーダー半径 (px): CSSコード border: 2px solid #000; border-radius: 0px; CSSコードをコピー ウェブデザインにおいて「ボーダー(境界線)」は、要素の強調や視覚的な整理に欠かせない要素です。「ボーダーデザインジェネレーター」では、Webでよく使われるプリセットデザインを選択...
1