REPOP WEBツール倉庫

ブラウザだけで完結する便利なWEBツール、WEBアプリが沢山あります

画像のフチぼかし(透過グラデーションマスク)のCSSジェネレーター

画像のフチぼかし(透過グラデーションマスク)のCSSジェネレーター

画像の端を透過グラデーションでぼかし、背景と滑らかに馴染ませるエフェクトを生成します。mask-imageを使用し、上下左右や円形など複数の方向にフェードアウト可能です。

文字の中に画像(マスクテキスト)のCSSジェネレーター

文字の中に画像(マスクテキスト)のCSSジェネレーター

指定した画像を文字の形に切り抜き、インパクトのあるテキストエフェクトを生成します。グラフィカルな見出しやタイトルの作成に適しています。

フリッカー・ネオン(点滅ネオン)のCSSジェネレーター

フリッカー・ネオン(点滅ネオン)のCSSジェネレーター

不規則な点滅を繰り返す、リアリティのあるネオンサイン文字のエフェクトを生成します。多重シャドウによる発光と透明度の変化で、レトロな雰囲気を演出します。

虹色に輝く枠線(レインボー・ローテート)のCSSジェネレーター

虹色に輝く枠線(レインボー・ローテート)のCSSジェネレーター

枠線が虹色に変化しながら回転し続ける視覚効果を生成します。conic-gradientを活用し、画像不要で軽量な実装が可能です。

ぷかぷか浮遊(フローティング演出)のCSSジェネレーター

ぷかぷか浮遊(フローティング演出)のCSSジェネレーター

要素が空中を漂うような、浮遊アニメーションを生成するツールです。

ぼんやり光るオーラ(グロー・オーラ)のCSSジェネレーター

ぼんやり光るオーラ(グロー・オーラ)のCSSジェネレーター

要素の背後に柔らかい発光エフェクトを追加し、呼吸するように明滅するアニメーションを付与するツールです。

文字の打ち込み演出(タイプライター)CSSジェネレーター

文字の打ち込み演出(タイプライター)CSSジェネレーター

文字が1文字ずつタイピングされるようなアニメーション効果を生成するCSSジェネレーターです。

物理的に押し込むボタン(3Dプッシュボタン)のCSSジェネレーター

物理的に押し込むボタン(3Dプッシュボタン)のCSSジェネレーター

クリックした際に沈み込むような、厚みのある3Dボタンを生成します。奥行き、押し込み感、カラーを直感的に調整可能です。

鏡面反射(ミラーリフレクション)のCSSジェネレーター

鏡面反射(ミラーリフレクション)のCSSジェネレーター

画像やテキストに対して鏡面反射(リフレクション)エフェクトを適用するCSSを生成します。方向、距離、不透明度を調整可能です。

円を描く文字(円形テキスト)のCSSジェネレーター

円を描く文字(円形テキスト)のCSSジェネレーター

入力したテキストを円形や半円に沿って配置。半径や回転角、文字の間隔を個別に調整して、円形状のタイポグラフィを作成できます。

紙の角めくれ(ペーパーカール)のCSSジェネレーター

紙の角めくれ(ペーパーカール)のCSSジェネレーター

カードの角がめくれたような視覚効果を付与。物理的に角を切り落とす clip-path を利用し、正確な形状とめくれ感を表現します。

階段状の影(ステップ・シャドウ)テキストのCSSジェネレーター

階段状の影(ステップ・シャドウ)テキストのCSSジェネレーター

テキストの背後に複数の影のレイヤーを等間隔で重ね、レトロポップな厚みのある階段状のエフェクトをCSSのみで生成します。

磨りガラスのSVGフィルタージェネレーター

磨りガラスのSVGフィルタージェネレーター

背景を物理的に加工し、磨りガラス(曇りガラス)のような質感にするSVGフィルターで表現します。

粒子グラデーションのSVGフィルタージェネレーター

粒子グラデーションのSVGフィルタージェネレーター

モダンなSaaSサイトで人気、ザラついた質感を持つ粒子グラデーション(Grainy Gradient)のSVGフィルターのグラデーション背景を生成します。

波紋・パルスアニメーションのCSSジェネレーター

波紋・パルスアニメーションのCSSジェネレーター

ボタンやアイコンの注目度を高める、波紋が広がるようなパルスアニメーションをCSSのみで生成します。JavaScript不要で軽量です。

流れるテキストのCSSジェネレーター

流れるテキストのCSSジェネレーター

JavaScript不要、CSSのみで流れるテキスト(Marqueeアニメーション)を生成します。

オーロラ背景のCSSジェネレーター

オーロラ背景のCSSジェネレーター

オーロラのようなアニメーションのある背景をCSSのみで生成。モダンなSaaSやポートフォリオに適した演出が可能です。

波打つ境界線アニメーションのCSSジェネレーター

波打つ境界線アニメーションのCSSジェネレーター

css-wave-dividerのアニメーション版です。セクション間に配置できる、流れるような波のデザインを生成します。

ドット・方眼背景(メッシュ背景)ジェネレーター

ドット・方眼背景(メッシュ背景)ジェネレーター

SaaSサイトやテック系メディアで多用される、洗練されたグリッドやドットの背景パターンを生成します。

角リボン(コーナーリボン)CSSジェネレーター

角リボン(コーナーリボン)CSSジェネレーター

カードや要素の角に「NEW」やカテゴリ名などのラベルを表示するリボンをCSSのみで生成します。

おしゃれなタイル状レイアウト(Bento Grid)CSSジェネレーター

おしゃれなタイル状レイアウト(Bento Grid)CSSジェネレーター

Apple製品の紹介ページなどで人気の、大小のボックスを隙間なく並べるモダンなグリッドレイアウト(Bento Grid)をCSS Gridで生成します。

浮かび上がる質感(ニューモーフィズム)CSSジェネレーター

浮かび上がる質感(ニューモーフィズム)CSSジェネレーター

背景と要素の色を統一し、2方向の影(ハイライトとシャドウ)によってソフトな3D感を演出するニューモーフィズムのデザインを生成します。

粘土のようなぷっくり感(クレイモーフィズム)CSSジェネレーター

粘土のようなぷっくり感(クレイモーフィズム)CSSジェネレーター

box-shadow プロパティの inset 指定を活用し、粘土やプラスチックのような立体感のある質感をCSSのみで生成します。

光反射するカードのCSSジェネレーター

光反射するカードのCSSジェネレーター

マウスホバー時や一定間隔でカード表面を光の筋が走り抜ける反射演出を、CSSのみで実装します。

ノイズで揺れる文字(グリッチ)CSSジェネレーター

ノイズで揺れる文字(グリッチ)CSSジェネレーター

デジタルデータの破損や通信ノイズを模したテキストエフェクトを、CSSアニメーションのみで生成します。

ボーダービーム(ボーダーアニメーション)CSSジェネレーター

ボーダービーム(ボーダーアニメーション)CSSジェネレーター

枠線に沿って光の筋が走り続ける、サイバーパンクやハイテク感のある演出を生成します。カードやボタンの注目度を高めるのに最適です。

漫画風の集中線(アニメーション集中線)CSSジェネレーター

漫画風の集中線(アニメーション集中線)CSSジェネレーター

漫画やアニメで使われる迫力のある集中線をCSSで生成します。アニメーション速度や線の密度を自由に調整可能です。

波打つテキストのCSSジェネレーター

波打つテキストのCSSジェネレーター

文字列を1文字ずつ分割し、上下にゆらゆらと波打たせるアニメーションを生成します。

ローディングスケルトンのCSSジェネレーター

ローディングスケルトンのCSSジェネレーター

コンテンツ読み込み中に表示するプレースホルダー(Skeleton Screen)のシマーエフェクトを生成します。

吹き出し(ツールチップ)のCSSジェネレーター

吹き出し(ツールチップ)のCSSジェネレーター

上下左右お好みの方向にしっぽがついた、カスタマイズ性の高い吹き出しデザインを生成します。