ボックスシャドウ（box-shadow） ジェネレーター
ボックスシャドウ（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
サンプル一覧を閉じるサンプル一覧を開くBOX-SHADOWcustomCSS.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);}コードをコピーするHTMLツールを使用するにあたっての注意
- 基本的に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の自動生成ツールです。豊富なサンプルから選択し、カスタマイズすることができます。テキストのリアルタイム変更や、複数の影にも対応し色々なデザインを試すことができます。
- 枠線・境界線（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要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です！
- 三角形 ジェネレーター
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要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です！
- CSS 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）などにも対応！
その他ツールの一覧
ツールに関連する解説動画の一覧
text-shadowとbox-shadow解説！文字や要素自身に色々な影をつけるには？
なんとなくで使っていませんか？カラーコード（#fffなど）を徹底解説！
サイト制作のコーディングに必須！flexbox（フレックスボックス）の基礎的な書き方や考え方を学びましょう！
擬似要素について解説！beforeとafterの使い方と、コーディングについて
各CSSプロパティの説明
box-shadowbox-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 / afterbeforeとafterは、要素の子要素として擬似要素を作成します。beforeは要素の最初の子要素、afterは要素の最後の子要素として作成されます。また、contentプロパティが必須です。beforeを記述する場合、その前に「：」（コロン）を記述しますが、これは1つでも2つでも動作します。しかし、疑似クラスと区別する為、2つで記述されることが多いです。記述例）.test::before {content: "";}contentプロパティには、文字列の他・引用符・カウンタ・画像などを挿入することも可能です。インライン要素として生成される為、widthなどのサイズ指定をする際はブロック要素などに変換する必要があります。スクリーンリーダーからは疑似要素にアクセスできなくなる可能性がある為、ユーザーにとって必要な情報については、疑似要素を使うべきかどうかを検討する必要があります。beforeとafterについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。positionpositionプロパティは要素がどのように配置されるかを設定します。static（初期値）以外の値が指定されている場合に top, right, bottom, leftの各プロパティが、配置された要素の位置を決めます。また、static以外の値が指定されているように関しては、z-index（重なり順）を指定することができます。z-indexの初期値はautoです。数値を指定することができ、数値が大きいほど要素は上のレイヤー（手前のレイヤー）として表示されます。positionプロパティは次の値を設定することができます。- relative：指定してもその要素自体の位置は変わりませんが、static（初期値）と違い、topなどの指定がされていた場合にその影響を受けます。
- absolute：祖先要素にstatic以外の指定がされていた場合、指定されている一番近い祖先要素を基準に配置します。
- fixed：画面を基準に相対的に要素を配置します。スクロールしても位置が変わりません。
- sticky：fixedと同じようにスクロールしても位置を固定しますが、親要素の範囲から出ることはできません。
記述例） position: relative;positionについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。ツール制作者について
backdrop-filterbackgroundbackground-colorbackground-positionbackground-sizeblock-sizeborderborder-block-endborder-block-end-colorborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-colorborder-end-end-radiusborder-end-start-radiusborder-inline-endborder-inline-end-colorborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-start-end-radiusborder-start-start-radiusborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthborder-widthbottombox-shadowcaret-colorclipclip-pathcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnsfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-variation-settingsfont-weightgapgrid-column-gapgrid-gapgrid-row-gapgrid-template-columnsgrid-template-rowsheightinline-sizeinsetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startleftletter-spacingline-clampline-heightmarginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-bordermask-positionmask-sizemax-block-sizemax-heightmax-inline-sizemax-linesmax-widthmin-block-sizemin-heightmin-inline-sizemin-widthobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-topperspectiveperspective-originrightrotaterow-gapscalescroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-coordinatescroll-snap-destinationscrollbar-colorshape-image-thresholdshape-marginshape-outsidetab-sizetext-decorationtext-decoration-colortext-decoration-thicknesstext-emphasistext-emphasis-colortext-indenttext-shadowtext-underline-offsettoptransformtransform-origintranslatevertical-alignvisibilitywidthword-spacingz-indexzoom-webkit-line-clampaccent-coloralign-contentalign-itemsalign-selfalign-tracksallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizeblock-overflowblock-sizeborderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-colorcalc()clearclipclip-pathcolorcolor-adjustcolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontaincontentcontent-visibilitycounter-incrementcounter-resetcounter-setcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-familyfont-feature-settingsfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-weightforced-color-adjustgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensimage-orientationimage-renderingimage-resolutioninheritinitialinitial-letterinitial-letter-aligninline-sizeinsetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startisolationjustify-contentjustify-itemsjustify-selfjustify-tracksleftletter-spacingline-breakline-clampline-heightline-height-steplist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trimmaskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemasonry-auto-flowmath-stylemax-block-sizemax-heightmax-inline-sizemax-linesmax-widthmin-block-sizemin-heightmin-inline-sizemin-widthmix-blend-modeobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yPseudo-classesPseudo-elementspaddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insidepaint-orderperspectiveperspective-originplace-contentplace-itemsplace-selfpointer-eventspositionquotesresizerevertrightrotaterow-gapruby-alignruby-mergeruby-positionscalescroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-gutterscrollbar-widthshape-image-thresholdshape-marginshape-outsidetab-sizetable-layouttext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-transformtext-underline-offsettext-underline-positiontoptouch-actiontransformtransform-boxtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslateunicode-bidiunsetuser-selectvertical-alignvisibilitywhite-spacewidowswidthwill-changeword-breakword-spacingword-wrapwriting-modez-index
