files/es/web/css/backdrop-filter/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: backdrop-filter
slug: Web/CSS/backdrop-filter
tags:
  - CSS
  - Diseño
  - Filtro SVG
  - Propiedad CSS
  - Referencia
  - SVG
  - Web
  - graficos
translation_of: Web/CSS/backdrop-filter
---
{{CSSRef}}

<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> de <strong><code>backdrop-filter</code></strong> le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está <em>detrás</em> del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.</p>

<pre class="brush: css no-line-numbers">/* Valor de palabra clave */
backdrop-filter: none;

/* URL al filtro SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* valores &lt;filter-function&gt; */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Múltiples filtros */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Valores globales */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Sintaxis">Sintaxis</h2>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>No se aplica filtro al fondo.</dd>
 <dt><code>&lt;filter-function-list&gt;</code></dt>
 <dd>Una lista separada por espacios de {{cssxref("&lt;filter-function&gt;")}} o un <a href="/es/docs/Web/SVG/Element/filter">filtro SVG</a> que se aplicará al fondo.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Ejemplo">Ejemplo</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="container"&gt;
  &lt;div class="box"&gt;
    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Ejemplo", 600, 400)}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
   <td>{{Spec2('Filters 2.0')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>


<p>{{Compat("css.properties.backdrop-filter")}}</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{cssxref("filter")}}</li>
</ul>