Question 1

linear-gradient・radial-gradient・conic-gradientの違いは？

Accepted Answer

linear-gradient: 直線方向のグラデーション。`background: linear-gradient(135deg, #667eea, #764ba2)`。radial-gradient: 円形・楕円形に広がる。`background: radial-gradient(circle at center, #f093fb, #f5576c)`。conic-gradient: 円錐状（パイチャートや時計のような）。`background: conic-gradient(#ff6b6b 0deg 120deg, #feca57 120deg 240deg, #48dbfb 240deg 360deg)`。Tailwindではv3.3から`bg-gradient-conic`が利用可能。

Question 2

CSSグラデーションをTailwind CSSで使う方法は？

Accepted Answer

Tailwindのビルトイングラデーション: `bg-gradient-to-r from-purple-500 to-pink-500`（右方向）。カスタムグラデーション: `tailwind.config.js`の`backgroundImage`に追加: `{ "hero": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" }`→`bg-hero`で使用。v3.3以降: `bg-[linear-gradient(135deg,#667eea,#764ba2)]`のような任意値も直接記述可能。

Question 3

CSSグラデーションでテキストに色を付ける方法は？

Accepted Answer

グラデーションテキスト: `background: linear-gradient(90deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;`。Tailwindでは: `bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent`。注意: Safariでは`-webkit-`プレフィックスが必要。PDFや印刷では正しく表示されない場合あり。

CSSグラデーション生成ツール

生成コード

このツールをもっと活用する

チートシート・テンプレート集

技術記事・実装ガイド

もっと学びたい方へ

BOOTH Store

Gumroad Store

TechBoost

フィードバック

EZARK Blog