Background effect with CSS only

Arnold Ewin 0
Viewed 28

Anyhow know how I can go about creating a background animation like this with CSS?

enter image description here

background design-patterns css
1 Answers

You can create two absolute html elements and align them left and right accordingly. Then you can apply CSS radial gradient on these elements for example: background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%); Otherwise, you can use pseudo-elements (:after, :before) instead of HTML tags.

Here is a quick sketch of what you can do:

.hero {
  height: 100vh;
  width: 100vw;
  background-color: #000;
  position: relative;
}
.hero:after,
.hero:before {
  content: '';
  background: radial-gradient(45% 45% at 50% 50%, rgba(77, 230, 219, 0.2) 0%, rgba(77, 230, 219, 0) 100%);
  display: block;
  position: absolute;
}
.hero:before {
  left: -100px;
  bottom: 0;
  width: 300px;
  height: 300px;
}
.hero:after{
  right: -100px;
  top: 0;
  width: 300px;
  height: 300px;
}
<div class="hero"></div>

To make life easier, you can use CSS Gradient Generators, such as: https://cssgradient.io/

la_petite_kozel0
Related