---
title: 'Propiedades personalizadas (--*): variables CSS'
slug: Web/CSS/--*
translation_of: Web/CSS/--*
---
<div>{{CSSRef}}</div>

<p class="summary"><span class="seoSummary">Los nombres de las propiedades que tiene el prefijo <code>--</code>, como <code>--ejemplo-nombre</code>, representan las <em>propiedades personalizadas </em>que contienen un valor que puede ser usado en otras declaraciones usando la función {{cssxref("var")}}.</span></p>

<p>Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.</p>

<p>{{CSSInfo}}</p>

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

<pre class="syntaxbox notranslate">--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
</pre>

<dl>
 <dt><code>&lt;declaración-valor&gt;</code></dt>
 <dd>Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.</dd>
</dl>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — <code>--mi-color</code> se tratará como una propiedad personalizada separada de <code>--Mi-color</code>.</p>
</div>

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

{{CSSSyntax}}

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

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

<pre class="brush: html notranslate">&lt;p id="firstParagraph"&gt;Este párrafo debe tener un fondo azul y un texto amarillo.&lt;/p&gt;
&lt;p id="secondParagraph"&gt;Este párrafo debe tener un fondo amarillo y un texto azul.&lt;/p&gt;
&lt;div id="container"&gt;
  &lt;p id="thirdParagraph"&gt;Este párrafo debe tener un fondo verde y un texto amarillo.&lt;/p&gt;
&lt;/div&gt;</pre>

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

<pre class="brush: css; highlight[2,3] notranslate">:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

</pre>

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

<p>{{EmbedLiveSample('Example', 500, 130)}}</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("CSS3 Variables", "#defining-variables", "--*")}}</td>
   <td>{{Spec2("CSS3 Variables")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("css.properties.custom-property")}}</p>

<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>
 <li><span class="seoSummary">La función {{cssxref("var")}}</span></li>
</ul>