How do I blur something in HTML?

Question

I want to make my top nav transparent (opacity: 0.9) and I want to make the background behind the top nav sort of blur (like Apple Inc has done here:)

enter image description here

How do I blur the background?

Blur effects are applied with a css filter: https://www.w3schools.com/cssref/css3_pr_filter.asp — marsnebulasoup, Aug 20 '20 at 01:42
Is that Apple example blurred? Or are they using a gradient? — MichaelvE, Aug 20 '20 at 01:44

Hao Wu · Accepted Answer · 2020-08-20T01:48:49.873

1

You can use backdrop-filter:

.background {
  background: url(https://picsum.photos/640/240) center/cover;
  width: 600px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 40px 80px;
  color: white;
  
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

<div class="background">
  <h1>Hello World</h1>
</div>

Also check the supportage

edited Aug 20 '20 at 01:48

answered Aug 20 '20 at 01:44

Hao Wu

17,573
6
28
60

Thank you very much! This works. I will tick the answer when the site allows me to :) (8 minutes). Thank you very much – RingGamesCompany Aug 20 '20 at 01:47
Which would work only in Blink (Webkit also has support behind prefix) – Kaiido Aug 20 '20 at 01:47

How do I blur something in HTML?

1 Answers1