---
title: Propriedades personalizadas (--*)
slug: Web/CSS/--*
translation_of: Web/CSS/--*
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p class="summary"><span class="seoSummary">Nomes de propriedades com o prefixo <code>--</code>, como <code>--example-name</code>, representam <em>Propriedade personalizadas</em> que contém um valor que pode ser reutilizado por todo o documento usando a função ({{cssxref("var")}}).</span></p>

<p>Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.</p>

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

<h2 id="Sintaxe">Sintaxe</h2>

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

<dl>
 <dt><code>&lt;declaration-value&gt;</code></dt>
 <dd>Este valor corresponde a qualquer sequência de um ou mais tokens, desde que a sequência não contenha tokens não permitidos. Representa a totalidade do que uma declaração válida pode ter como valor.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Exemplo">Exemplo</h2>

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

<pre class="brush: html">&lt;p id="firstParagraph"&gt;Este parágrafo deve ter um fundo azul e um texto amarelo.&lt;/p&gt;
&lt;p id="secondParagraph"&gt;Este parágrafo deve ter um fundo amarelo e um texto azul.&lt;/p&gt;
&lt;div id="container"&gt;
  &lt;p id="thirdParagraph"&gt;Este parágrafo deve ter um fundo verde e um texto amarelo.&lt;/p&gt;
&lt;/div&gt;</pre>

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

<pre class="brush: css; highlight[2,3]">: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="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>suporte básico</td>
   <td>49.0</td>
   <td>15</td>
   <td>{{CompatGeckoDesktop("42.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>36.0</td>
   <td>9.3<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>suporte básico</td>
   <td>50.0</td>
   <td>{{CompatGeckoDesktop("29.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>37.0</td>
   <td>9.3<sup>[3]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<p>[3] See {{WebKitBug(19660)}}.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/pt-BR/docs/Web/CSS/Using_CSS_variables">Utilizando variáveis CSS</a></li>
</ul>