KAKERU TOOLS ─ 無料・登録なし
グラデーション文字メーカー文字と色を選ぶだけで、グラデーションの文字ができる。CSSのコードも、動画に使える透明なPNG画像も、その場で。
無料で使える登録・インストール不要スマホでもOK
グラデーション文字
向き
背景
背景を白・黒・写真に切り替えると、動画やサイトに置いたときの読みやすさを確かめられます(背景は保存されません)。
改行すると、2行・2列の文字になります。
PNGで保存背景は透明。動画・資料・SNSに
保存のしかた
画面サイズ
置く場所
文字の大きさ
文字と色動かすと、すぐ左に反映されます
フォントfont-family
Google Fonts の無料フォントです。サイト・画像・動画にも使えます(SIL Open Font License)。
太さfont-weight
文字の間隔letter-spacing
色gradient
色の向きangle
縁取りtext-stroke
影drop-shadow
コピペ用のコードWebサイトに使うとき
文字の大きさfont-size
px
「画面に合わせて」は clamp() で、スマホでは小さく、パソコンでは大きくなります。しくみは「画面の幅で文字の大きさを変えるCSS「clamp()」」で解説しています。
1
文字を入れて、フォントを選ぶ
横書きも縦書きも。自分のパソコンに入っているフォントも使えます。
2
色を選ぶ
色のひな形から始めて、2色・3色や向きを変えられます。縁取りと影もボタンひとつ。
3
コードをコピー、またはPNGで保存
サイトにはCSSを。動画には、画面サイズぴったりの透明PNGを。
Presets色のひな形から始める
Learnしくみを知りたい人へ(WEB技術の記事)
ABOUT ─ この道具について
KAKERUデザインが作りました。WEBとデザインの仕事を20年以上続けてきた中で「あったら便利」と思ったものを、無料の道具にしています。サイト制作やWEBまわりのご相談もどうぞ。



