CODEWITHSUNDEEP
cssreact-native
Justin Priede
Justin Priede

Reputation: 119

Glassmorphism background

I am trying to recreate the image below that gives the button a "opaque" or blurred transparency look. I have tried googling for an opaque background but did not find much. How can I recreate this look?

enter image description here

Upvotes: 0

Views: 1145

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13668

The effect is called, I believe, glassmorphism. It is generally achieved using backdrop-filter. You can find a generator for this effect at https://css.glass/. Here's some example CSS it kicked out that seems like it approaching the style in your image:

.your-class-here {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.19);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Obviously there's some extra properties in there you might not need, but you can strip out what you do.

Upvotes: 1

Related Questions