Blur Effect

Welcome

In this project we learn how to create a beautiful blur effect, using React, CSS and Javascript.

Card Blur Style

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #ffffff50;
  box-shadow: 0 15px 25px rgba(129, 124, 124, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  padding: 16px;
  margin: 16px;
  text-align: center;
  color: #18181890;
}

Background Blur Style

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

.background {
  position: absolute;
  z-index: -1;
  display: flex;
  flex-wrap: wrap;
  height: 720px;
  filter: blur(60px);
}

Conclusion

Blur effects can look beautiful but you don't want to use them too much because they can low your app performance.

Links

Go back to Projects