---
title: var()
slug: Web/CSS/var
translation_of: Web/CSS/var()
original_slug: Web/CSS/var()
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>La función <strong><code>var()</code></strong> puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).</p>

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

<p>El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.</p>

{{csssyntax}}

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

<dl>
 <dt>&lt;custom-property-name&gt;</dt>
 <dd>El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.</dd>
 <dt>&lt;declaration-value&gt;</dt>
 <dd>El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .</dd>
</dl>

<h2 id="Ejemplos">Ejemplos</h2>

<pre class="brush: css notranslate">:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
</pre>

<pre class="brush: css notranslate">/* Fallback */
/* En el estilo del componente: */
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* En el estilo de la aplicación: */
.component {
  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
}
</pre>

<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('CSS3 Variables', '#using-variables', 'var()')}}</td>
   <td>{{Spec2('CSS3 Variables')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

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

{{Compat("css.properties.custom-property.var")}}

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

<ul>
 <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li>
</ul>