Box Shadow ジェネレーター
画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影(inset)や、複数の影の生成にも対応。beforeやafterなどの擬似要素にも対応しています。
ニューモフィズムのサンプルも用意しています。
サンプル一覧(見本)。作りたいもののイメージに一番近いものを選択して下さい。選択後に編集することが可能です。
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
- BOX-SHADOW
.original-box-shadow { display: flex; align-items: center; justify-content: center; color: #333333; background-color: #dddddd; font-size: 30px; width: 300px; height: 100px; border-radius: 3px; box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);}
ツールを使用するにあたっての注意
- 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
- ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
- 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください
ツールの使い方について
・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。
ご活用ください。
ジェネレーターの一覧
CSS グラデーション ジェネレーター
背景にグラデーションをかけるための、ジェネレーターです。
基本的な(線形)グラデーションのlinear-gradient、radial-gradient(円形)、conic-gradient(扇形)などに対応し、直感的にグラデーションを生成することができます。
複数のグラデーションの指定にも対応している為、重なり順が上のグラデーションの指定色を透過させる事で、複数のグラデーションを混ぜた色を生成することも可能です。
円形・扇形グラデーションにおいては、中心位置を直感的に操作するためのツールを用意している他、線形・扇形グラデーションの角度(deg)を直感的に操作することができる機能も搭載しています。
グラデーションの繰り返しにも対応しています。
また、70種類以上のサンプルから選択しカスタマイズできます!ボタンジェネレーター
直感的におしゃれなボタンを作ることができる、高機能自動ボタン生成ツールです。
背景色・背景グラデーション・ボタンの影(box-shadow)・文字の影(text-shadow)・サイズ(横幅、縦幅)・枠線(border)・角丸(border-radius)・transition(アニメーション)などに対応しています。
擬似要素(before, after)やマウスホバー(hover)、マウスホバー後の擬似要素にも対応しているので、様々なデザインのボタンを生成することが可能です
サンプルも20種類以上を用意しています!Box Shadow ジェネレーター
画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影(inset)や、複数の影の生成にも対応。beforeやafterなどの擬似要素にも対応しています。
ニューモフィズムのサンプルも用意しています。text-shadow ジェネレーター
文字に様々な影をつけることができる、text-shadowの自動生成ツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
テキストのリアルタイム変更や、複数の影にも対応し色々なデザインを試すことができます。CSS border ジェネレーター
枠線をつけるためのCSS自動生成ツールです。
上下左右に個別に指定が出来る他、点線(dotted)・破線(dashed)・二重線(double)・立体的な線(groove / ridge / isnet / outset)なども生成することができます。プレビューのサイズ(横幅・縦幅)や角丸(border-radius)の指定も可能です!CSS filter ジェネレーター
画像や要素にエフェクトを簡単に実装できる、css filterのツールです。
ぼかし(blur)・明るさ(brightness)・コントラスト(contrast)・グレースケール(grayscale)・色相回転(hue-rotate)・反転(invert)・彩度(saturate)・セピア(sepia)・影(drop-shadow)などを複数指定することができます。
どのように活用したらいいか分からない方向けに、css filterのサンプルを用意
また、複数のサンプル画像やHTML要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です!CSS 三角形 ジェネレーター
HTMLとCSSのみで三角形(triangle)をつくるためのジェネレーターです。
CSSのborderを利用することにより矢印を自動生成します。上下左右以外にも360度全ての方向が指定可能!
正三角形を自動計算するための機能を搭載している他、色も自由に変更が可能です。
吹き出しやフローチャートなどでご活用ください。CSS backdrop-filter ジェネレーター
指定した要素の背面にエフェクトを実装できる、backdrop-filterのツールです。
ぼかし(blur)・明るさ(brightness)・コントラスト(contrast)・グレースケール(grayscale)・色相回転(hue-rotate)・反転(invert)・彩度(saturate)・セピア(sepia)・影(drop-shadow)などを複数指定することができます。
どのように活用したらいいか分からない方向けに、css filterのサンプルを用意
また、複数のサンプル画像やHTML要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です!transform 2D / 3D ジェネレーター
直感的な操作でtrasnsform(変形)の実行結果をシミュレートする為のツールです。
translate(移動), rotate(回転), scale(拡大・縮小), skew(歪み)を2D/3D方向に直感的に操作可能!transform-origin(回転軸), perspective(パース・視点), perspective-origin(消失点)にも対応しています。
また、対象要素や元となるX,Y,Z軸を視覚的に表示可能ですCSS transition ジェネレーター
簡単なアニメーションの為のtransition(トランジション)のジェネレーターです。
イージング(easing)や時間(duration)・遅延(delay)などにも対応!サンプルから選択して、編集可能です。アニメーション前後のスタイルを細かく設定できるので、transitionのシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。CSS animation ジェネレーター
CSSアニメーションの為のツールです。イージング(easing)や時間(duration)・遅延(delay)などにも対応!
その他ツールの一覧
フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ
- フリーランスとして生きていきたい。
- HTML / CSSの書き方が分からない・不安がある
- きちんと会社のホームページやブログを作ってみたい!
- 「WEB担当」になってしまったけど、全然分からなくて、不安…。
- 好きな時間に好きな場所で仕事出来るようになりたい!
- しっかり技術を身につけて、収入を上げたい。
- 簡単に効率的にホームページを作れる方法やツールが知りたい!
- 全くの初心者なので、プロからしっかりと学んでみたい
- 外注すると高いので、自分で身に付けたい
こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。
ツールに関連する解説動画の一覧
各CSSプロパティの説明
- box-shadow
- box-shadowプロパティは要素に影を設定することができます。各値(value)は、次のように指定することができます
box-shadow: 影を内側に付ける(inset)水平方向のずらし量垂直方向のずらし量影のぼかし量影の大きさ影の色- 水平方向のずらし量垂直方向のずらし量の値はマイナスの値を指定すると、それぞれ垂直方向の上と、水平方向の左に配置されます。
- 影の大きさはプラスの値を指定すると大きくなっていきますが、マイナスの値を指定すると小さくなっていきます。
記述例) box-shadow: inset 2px 2px 3px 4px #000;insetの指定が不要な場合は、記述も不要です。- 値を2つだけ指定した場合は、水平方向のずらし量垂直方向のずらし量として設定されます。
- 値を3つだけ指定した場合は、さらに3つ目の値が影のぼかし量として設定されます。
- また値を4つだけ指定した場合は、さらに4つ目の値が影の大きさとして設定されます。
影の色は初期値がcurrentColor(colorに設定されている値)となります。border-radius が指定された場合は、影もその丸みを反映します。影は複数指定することができます。
複数指定したい際は、カンマ「,」で区切って指定します。最初に指定された影が最も手前に来ます。
記述例) box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, .5), 0px 0px 3px #ff0;テキストに影をつける場合は、text-shadowを使用します。 - before / after
- beforeとafterは、要素の子要素として擬似要素を作成します。
beforeは要素の最初の子要素、afterは要素の最後の子要素として作成されます。
また、contentプロパティが必須です。
beforeを記述する場合、その前に「:」(コロン)を記述しますが、これは1つでも2つでも動作します。
しかし、疑似クラスと区別する為、2つで記述されることが多いです。
記述例)
.test::before {
content: "";
}contentプロパティには、文字列の他・引用符・カウンタ・画像などを挿入することも可能です。
インライン要素として生成される為、widthなどのサイズ指定をする際はブロック要素などに変換する必要があります。スクリーンリーダーからは疑似要素にアクセスできなくなる可能性がある為、ユーザーにとって必要な情報については、疑似要素を使うべきかどうかを検討する必要があります。beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。 - position
- positionプロパティは要素がどのように配置されるかを設定します。
static(初期値)以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。
また、static以外の値が指定されているように関しては、z-index(重なり順)を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー(手前のレイヤー)として表示されます。positionプロパティは次の値を設定することができます。- relative:指定してもその要素自体の位置は変わりませんが、static(初期値)と違い、topなどの指定がされていた場合にその影響を受けます。
- absolute:祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
- fixed:画面を基準に相対的に要素を配置します。
スクロールしても位置が変わりません。 - sticky:fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。
positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。
ツール制作者に関するリンク
このサイトについて
サイトをご利用いただき、またツールを使っていただきありがとうございます。
このサイトは、フロントエンド開発を支援するためのツールを提供しているサイトです。
フロントエンド学習を効率的に進めたい方、CSSがよく分からないけど直感的にWebサイトのデザインを変更したい方、CSSには精通しているけどもっと感覚的にデザインやアニメーションをコーディングしたい方、など向けに制作しています。
制作するツールの選定
基本的に何かのツールを制作すると決めた時に、既に同じようなものがWeb上にある場合には、そちらを使っていただいた方が良いと考えています。
ただし同じようなものであっても、もっとこういった機能が欲しいと感じるものがあったり、UIを使いやすくできるのでは無いかと感じた場合に、新たに制作しています。
サイトの仕様について
このサイトのアクセスの比率はほとんどがPCです。その為、スマホやタブレットでの閲覧にも一応対応はしていますが、PCのUIのしやすさを最優先に設計されています。
基本的にはこのサイトへのアクセスも、生成されるコードの使用シーンの想定としても、ブラウザは Chrome, Firefox, Safari, Edge などのモダンブラウザです。ベンダープレフィックスの自動付与やレガシーブラウザへの対応はしておりません。
このサイトを作った経緯
Web上には以前からたくさんのフロントエンド開発の為の素晴らしいツールが存在していました。そして、自分自身フロントエンドを学び始めた時には様々なサイトにお世話になりました。
このサイトでも扱っているような「box-shadow」「text-shadow」「transform」「linear-gradient(グラデーション)」などのジェネレーターは、特に使わせていただいたと思います。
ただ、やはり日本語のツールが少なかったり、こんな機能が欲しいというものが無い場合がありました。そんな時、日本語にも対応していて、自分の欲しい機能が搭載されているツールを作りたいと思ったのがきっかけです。
当時の自分のように、勉強をし始めた方や、直感的に自分の表現を実現したいと思っている方に届けば良いなと思います。