はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ&ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
![加工なし CSS のみで画像にグリッチと RGB ずらし効果をかける](https://cdn-ak-scissors.b.st-hatena.com/image/square/dde92e2d61e4482cb37944c0652a3ba186b4c74b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fjNr8ylR--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E5%25258A%2525A0%2525E5%2525B7%2525A5%2525E3%252581%2525AA%2525E3%252581%252597%252520CSS%252520%2525E3%252581%2525AE%2525E3%252581%2525BF%2525E3%252581%2525A7%2525E7%252594%2525BB%2525E5%252583%25258F%2525E3%252581%2525AB%2525E3%252582%2525B0%2525E3%252583%2525AA%2525E3%252583%252583%2525E3%252583%252581%2525E3%252581%2525A8%252520RGB%252520%2525E3%252581%25259A%2525E3%252582%252589%2525E3%252581%252597%2525E5%25258A%2525B9%2525E6%25259E%25259C%2525E3%252582%252592%2525E3%252581%25258B%2525E3%252581%252591%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AKite%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dVd0RFM2dGcXRNYjJpUmRMLWxEaHNwdjgzaVBjSG9ZZEpRX0hKWlE9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)