CSSで幾何学模様や繊細なグラデーションなど、さまざまな要素の背景にパターンを実装できる -MotifyX
Post on:2025年4月15日
sponsors
美しい幾何学模様のパターン、ドットやグリッドベースのパターン、繊細なカラーの変化が楽しめるダークグラデーション、マトリックスのような近未来のパターンなど、CSSで実装された背景パターンを紹介します。
商用プロジェクトでも完全に無料で利用できます。カラーの変更などのカスタマイズも簡単で、ダークモードでもライトモードでも機能します。
MotifyXとは
MotifyXはUIデザイナーやデベロッパー向けに、Webサイトやスマホアプリにぴったりな洗練された背景パターンのコレクションです。MITライセンスで、商用プロジェクトでも無料で利用できます。
主な特徴は、下記の通り。
- 洗練された50種類以上の手作りの背景パターン。
- パターンのカテゴリ
- Geometric Patterns: 幾何学模様のミニマルでクリーンなパターン
- Futuristic Patterns: SF風のエフェクトを施した近未来なパターン
- Matrix Patterns: マトリックススタイルのダイナミックなパターン
- Codescape Patterns: コードをテーマにしたパターン
- Dark Gradients: 繊細でモダンなカラーの変化が楽しめるパターン
- Dot Patterns: パーティクルエフェクトのパターン
- パターンはリアルタイムでカスタマイズできます。
- CSSのコードは即時に生成され、コピペで実装できます。
- レスポンシブに完全対応。
- パフォーマンスは超高速です。
- MITライセンス
ちなみに、サイトはReact.jsとTailwind CSSで実装されており、Framer Motionの繊細なアニメーションを楽します。
MotifyXの使い方
MotifyXの使い方は簡単、登録など面倒なことは一切不要です。
まずは、サイトにアクセスします。
気に入った背景パターンの「Preview」をクリックすると、詳細とCSSのコードが表示されます。「Copy CSS」をクリックすると、CSSをコピーできます。
パターンの「Preview」
カスタマイズも簡単です。
パターンによってカスタマイズできる項目が異なりますが、たとえば下記の背景パターンはカラーが変更できます。
背景パターンのカスタマイズ
「Apply to Page」をクリックすると、ページにその背景パターンが適用されます。
カスタマイズした背景パターンの適用
CSSで実装された背景パターン
MotifyXには現在、6つのカテゴリに50種類以上の背景パターンが揃っています。
カテゴリはページの右下から選択できます。
MotifyX: Geometric Patterns
幾何学模様のミニマルでクリーンな背景パターンです。
MotifyX: Futuristic Patterns
SF風のエフェクトを施した近未来な背景パターンです。
MotifyX: Dot Patterns
質感と奥行きを演出する繊細な背景パターンです。
MotifyX: Matrix Patterns
マトリックススタイルのダイナミックな背景パターンです。「Binary Rain」は文字列が上から流れ落ちるのだと思ったのですが、機能しませんでした。
※アニメーションはこれから実装予定とのこと（参考: Issues）
MotifyX: Codescape Patterns
コードをテーマにした背景パターンです。
MotifyX: Dark Gradients
繊細でモダンなカラーの変化が楽しめる背景パターンです。
sponsors
