CSSグラデーション生成
2つの色と角度からCSS linear-gradient・radial-gradientコードを作り、リアルタイムプレビューで確認できます。中間色情報も提供し、すべてブラウザ内で処理されます。
- CSS
- background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
- 中間色
- #a857c5
よくある質問
각도는 어떤 방향인가요?
CSS 각도는 0°가 아래→위, 90°가 왼쪽→오른쪽, 180°가 위→아래 방향입니다. 대각선 그라디언트는 45° 또는 135°를 많이 씁니다.
3색 이상 그라디언트도 만들 수 있나요?
생성된 코드에 색상 정지점을 직접 추가하면 됩니다. 예: linear-gradient(90deg, #a 0%, #b 50%, #c 100%). 중간색 값을 50% 지점에 넣으면 자연스러운 3색 그라디언트가 됩니다.
그라디언트가 계단처럼 끊겨 보여요.
명도 차이가 큰 두 색을 넓은 영역에 펼치면 밴딩이 생길 수 있습니다. 중간 색상 정지점을 추가하거나 색상 차이를 줄이면 완화됩니다.
関連ツール
オフセット・ぼかし・広がり・色・不透明度を調整してCSS box-shadowコードを作り、リアルタイムプレビューで確認できます。insetにも対応し、すべてブラウザ内で処理されます。
基準色から明るいトーンと暗いトーンのHEXパレットを生成します。デザインシステムの色階調づくりに便利で、処理はすべてブラウザ内で行われます。
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
テキストと背景色のコントラスト比を計算し、WCAG 2.x AA・AAAアクセシビリティ基準の合否を判定します。すべてブラウザ内で処理されます。
最小・最大サイズとビューポート範囲からレスポンシブなclamp()コードを生成します。メディアクエリなしでフォントサイズが画面幅に応じて滑らかに変わるfluid typographyに使えます。すべてブラウザ内で処理されます。
CSSからコメントと不要な空白を除去してサイズを削減します。文字列値は保持され、処理はすべてブラウザ内で行われます。