Web Tool Gallery

Web制作で役に立つツールやサービスを紹介しています

CSS製の様々なUIパーツギャラリー - Loaders made with CSS and HTML

ボタン、チェックボックス、ローディング、トグルボタンなど様々なUIパーツのギャラリーサイト。全てのパーツはHTMLとCSSのみで表現できる。

【コピペ用】コンテンツ幅から画面いっぱいにはみ出しているレイアウトを実現するCSS

片方の要素がコンテンツ幅から画面いっぱいにはみ出しているレイアウトを実現するためのCSS

CSS clip-path ジェネレーター

clip-pathで様々な図形を作成するためのコードを生成してくれるツール。三角形や丸の他にも、自分で自由にパスを動かすこともできる。

mix-blend-mode リアルタイムプレビュー

CSSのmix-blend-modeをリアルタイムでプレビューできるツール。色や画像も変更可能！

ローディングアイコンをCSSで作る（コピペ可）

ローディング中のアイコンを作るためのCSSをコピペできるサイト。

clamp()カリキュレーター

ビューポートサイズと実際の値を入れるだけでclamp()で使う値を計算してくれるツール。

SVGをdataURLに変換

SVGをdataURL形式に変換できるツール。

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

CSSグラデーションのコードを生成できるジェネレーター。

Web上でSassをCSSにコンパイル

SassをCSSに変換できるツール。SASS、SCSSどちらにも対応可能！

CSS三角形作成ツール

CSSで三角形を作るときのコード生成ジェネレーター。