UUUP Tools

デザインツール

CSS Ribbon ジェネレーター - コーナーバッジスタイル

カード向けの斜めコーナーリボン CSS を視覚的に生成できます。テキスト、色、offset、width、font size を調整し、sale、sold-out などのステータスバッジを作れます。

クイック切替→CSS Box Shadow ジェネレーター
CSSBadgeRibbon
クイック切替:CSS Box Shadow ジェネレーターCSSクリップパスCSS グラデーションジェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • 商品カードの角に販促用リボンを付ける
  • sold-out や new などの状態表示を付ける
  • メイン画像を隠さないように offset を微調整する

使い方

  1. リボンのテキストを入力し、角の位置を選ぶ
  2. 色、offset、width、font size を調整する
  3. 親要素の overflow 設定を確認してから CSS をコピーする

入出力サンプル

設定

テキスト「HOT DEAL」、右上配置、赤い背景 / 白い文字

CSS

.ribbon { position: absolute; transform: rotate(45deg); ... }

FAQ

リボンの角が切れて見えるのはなぜですか？

傾いたリボンは要素の外にはみ出しやすいためです。親要素には position: relative が必要で、overflow: hidden の要否はプレビュー設定に依存します。

selector は自由に変更できますか？

はい。card と ribbon の selector を編集できます。生成される snippet も入力した selector を使います。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSS Box Shadow ジェネレーター

CSS Box Shadow ジェネレーター - 視覚的コントロール付き

利用可能

offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。

CSS 影 box-shadow
ツールを開く

CSSクリップパス

CSSクリップパス - 図形ジェネレーター

利用可能

preset と簡単な control から CSS clip-path の shape を生成し、live preview で確認できます。angled card、badge、画像 crop、装飾 layout に便利です。

CSS clip-path Shape
ツールを開く

CSS グラデーションジェネレーター

CSS グラデーションジェネレーター - Linear、Radial、Conic

利用可能

linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。

CSS グラデーション 背景
ツールを開く