ホラーな背景

今回はホラーな雰囲気の背景を作ってみました。

血痕風

<div style="background: radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.6), transparent 30%), radial-gradient(circle at 70% 70%, rgba(255, 0, 0, 0.4), transparent 30%), radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.2), transparent 40%) 0 0 / 100px 100px repeat; padding: 20px; margin: 20px; border: 1px solid #330000; border-radius: 10px;">
<p>ここに文章</p>
</div>

ここに文章

たしかに血痕と言われればみえなくもない。

血痕風点線枠つき

<div style="background: radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.6), transparent 30%), radial-gradient(circle at 70% 70%, rgba(255, 0, 0, 0.4), transparent 30%), radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.2), transparent 40%) 0 0 / 100px 100px repeat; padding: 20px; margin: 20px; border: 4px dotted #fffafa; border-radius: 10px;">
<p>ここに文章</p>
</div>

ここに文章

血痕風立体

<div style="background: radial-gradient(circle at 30% 30%, rgba(255, 0, 0, 0.6), transparent 30%), radial-gradient(circle at 70% 70%, rgba(255, 0, 0, 0.4), transparent 30%), radial-gradient(circle at 50% 50%, rgba(255, 0, 0, 0.2), transparent 40%) 0 0 / 100px 100px repeat; padding: 20px; margin: 20px; border: 4px outset #fffafa;">
<p>ここに文章</p>
</div>

ここに文章

ダークなストライプ

<div style="background: repeating-linear-gradient(45deg, #4e4e4e, #4e4e4e 10px, #383838 10px, #383838 20px), linear-gradient(90deg, rgba(139,69,19,0.7), rgba(139,69,19,0.4)); padding: 20px; margin: 20px; border: 1px solid #666; border-radius: 10px;">
<p style="color: #fff;">ここに文章</p>
</div>

ここに文章

不気味な霧風

<div style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent) 0 0 / 200px 200px repeat; padding: 20px; margin: 20px; border: 1px solid #333; border-radius: 10px;">
<p style="color: #fff;">こちらは不気味な霧風の背景。</p>
</div>

こちらは不気味な霧風の背景。

霧の中からなんか出てくる「ミスト」っていう映画がありますね！

「後悔先に立たずとはこのことか！」という衝撃のラスト。

気になる方は見てみてください。