✨

Shimmer / スケルトン画面ジェネレーター

CSS の shimmer/スケルトン読み込みエフェクトをプレビュー・カスタマイズ。様々なスケルトンパターンの CSS コードを生成。

パターン: アニメーション速度:

CSS コード

.shimmer-block {
    background: linear-gradient(90deg, ベース色 25%, ハイライト色 50%, ベース色 75%);
    background-size: 200% 100%;
    animation: shimmer var(--shimmer-speed, 2s) infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

関連ツール

🎨

Shimmer / スケルトン画面ジェネレーター

関連ツール

背景パターンジェネレーター

ベジェ曲線ビジュアライザー

CSSボックスモデルビジュアライザー

CSS 背景フィルタープレビュー

Clip Path ジェネレーター

バッジ生成ツール

Box Shadow ジェネレーター

ASCII テキストバナー生成器

CSS Gradient Preview

CSS Flexbox ジェネレーター

CSS color-mix()実験ツール

CSSセレクターテスター

Flexbox Generator

インタラクティブグラデーション構築

CSS Media Query Explorer

CSS Position Generator