こんにちは、いつも「かつコード」のサイトをご覧いただきまして、ありがとうございます。

この度、2026年8月31日「katsuooool」をリリースしました。

今回は、そのkatsuoooolの中でもCSSを生成するツールについてどんなものがあるのかをご紹介いたします。

CSSを書かなくても、見た目を先に確認したい

「ボタンにふんわり影をつけたい」「背景にさりげない模様を入れたい」——こうした装飾は、CSSのコードを1行1行書きながら数値を調整するのは骨が折れます。

特に影のぼかし具合やグラデーションの角度は、実際に見てみないと感覚がつかみにくいものです。

SmartSproutsが2026年8月31日にリリースした実用ツール集「katsuooool」（https://katsuooool.katsucode.jp/）には、CSSのジェネレーター5種と、背景パターンのジェネレーター6種が用意されています。この記事ではその11個のツールをまとめてご紹介します。

CSSジェネレーター5種

box-shadow・border-radius・glassmorphism・flexbox・gridの5つは、見た目を確認しながら数値を調整し、そのままコピーできるCSSコードを生成するツールです。

Box Shadowジェネレーター（/css-box-shadow）

box-shadow（要素に影をつけるCSSのプロパティ）の見た目を、プレビューを見ながら調整してコードを生成できます。カードやボタンに立体感を出したいときに使います。
→ https://katsuooool.katsucode.jp/css-box-shadow

Border Radiusジェネレーター（/css-border-radius）

border-radius（要素の角を丸くするCSSのプロパティ）を4隅個別に調整できるツールです。左上だけ丸くする、といった非対称なデザインもプレビューしながら作れます。
→ https://katsuooool.katsucode.jp/css-border-radius

Glassmorphismジェネレーター（/css-glassmorphism）

Glassmorphism（すりガラスのような半透明感を出すデザイン手法）の透明度・ぼかし・影を調整できるツールです。最近よく見かける、背景が透けて見えるカードのデザインをコードなしで作れます。
→ https://katsuooool.katsucode.jp/css-glassmorphism

Flexboxジェネレーター（/css-flexbox）

Flexbox（要素を横並び・縦並びに整列させるCSSのレイアウト手法）をプレイグラウンド形式で試せるツールです。「要素を横に並べたいが、うまく揃わない」という悩みを、実際に操作しながら解決できます。
→ https://katsuooool.katsucode.jp/css-flexbox

Gridジェネレーター（/css-grid）

Grid（縦横のマス目でレイアウトを組むCSSの手法）の列数・行数・gap（要素間の余白）を調整できるツールです。ギャラリーページや商品一覧のレイアウトを組みたいときに使えます。
→ https://katsuooool.katsucode.jp/css-grid

背景パターン生成ツール6種

ドット・グリッド・ストライプ・チェッカーボード・ジグザグ・波の6種類は、背景にさりげない模様を加えたいときに使う、CSSコード生成ツールです。

背景を単色のままにせず、控えめな模様を入れるだけで、サイトの印象は大きく変わります。

katsuoooolのPatternカテゴリでは、次の6種類の背景パターンをCSSコードとして生成できます。

パターン	URL	こんな場面で
ドットパターン	https://katsuooool.katsucode.jp/pattern-dot	セクション背景にさりげない質感を出したいとき
グリッドパターン	https://katsuooool.katsucode.jp/pattern-grid	設計図・方眼紙のような雰囲気を出したいとき
ストライプパターン	https://katsuooool.katsucode.jp/pattern-stripe	バナーやタグに動きをつけたいとき
チェッカーボードパターン	https://katsuooool.katsucode.jp/pattern-checkerboard	市松模様で和のテイストを出したいとき
ジグザグ（シェブロン）パターン	https://katsuooool.katsucode.jp/pattern-chevron	ポップで元気な印象を出したいとき
波模様パターン	https://katsuooool.katsucode.jp/pattern-wave	セクションの区切りをやわらかく見せたいとき

いずれも生成されるのはCSSコードのため、既存サイトのbackground部分に貼り付けるだけで反映できます。

まとめ

box-shadow、border-radius、glassmorphism、flexbox、gridのCSSジェネレーター5種と、ドット・グリッド・ストライプ・チェッカーボード・ジグザグ・波の背景パターン生成6種、合わせて11個のツールが、katsuoooolのCSS・Patternカテゴリに揃っています。

どれもプレビューを見ながら数値を調整し、できあがったコードをそのままコピーできるので、CSSを1から書く必要がありません。

今なら全機能が無料なので、気になったものから試してみてください。

今日からできる3つのアクション

• 自社サイトのボタンやカードに、Box Shadowジェネレーター（/css-box-shadow）で影をつけてみる
• セクションの背景の1つに、パターン生成ツールで模様を試しに入れてみる
• レイアウトが崩れがちな箇所を、Flexbox・Gridジェネレーターで組み直してみる