> ## Documentation Index
> Fetch the complete documentation index at: https://help.standards.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Effects

Apply effects to quickly demonstrate a brand don’t, add emphasis with a drop shadow, or show the x-height of text.

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/efffects-hero.gif?s=c476802c43b6abf63c2fa66699ddd21b" alt="Various effects in use, with text being stretched and logos being rotated" width="1280" height="639" data-path="images/efffects-hero.gif" />
</Frame>

***

## Effects basics

Effects are settings that can be applied to elements.

### How to apply effects

<Steps>
  <Step title="Select an element">
    Within the design editor, in the right sidebar settings, look for the group labeled **Effects**
  </Step>

  <Step title="Select +">
    Choose the desired effect from the effect dropdown. Modify the parameters, then press done to apply
  </Step>

  <Step title="Optional: stack effects">
    Effects can stack, so add more than one to get creative
  </Step>
</Steps>

### Managing effects

* Effects can be removed by selecting the trash can icon, or from within the effect edit sidebar
* Edit existing effect by selecting them from the **Effects** settings group on the selected element

***

## General effects

General effects can be applied to most elements to quickly demonstrate a brand Don’t or add emphasis with a drop shadow.

### Strikethrough

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-strikethrough.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=cc51c013bcd77e15b7f726d4a537404d" alt="Photos with red strikethroughs" width="2400" height="1200" data-path="images/effect-strikethrough.png" />
</Frame>

The strikethrough effect is a line that overlays typically used to show an example of something a viewer should not do.

### Drop shadow

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-dropshadow.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=fe7195278cf79c7549bfd8bc6aa47246" alt="Button tiles with dropshadows" width="2400" height="1200" data-path="images/effect-dropshadow.png" />
</Frame>

The drop shadow effect allows depth to be added behind elements.

### Rotate

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-rotate.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=00126160b070a09a9a4e3541ec4f0a2a" alt="Text rotated 90 degrees" width="2400" height="1200" data-path="images/effect-rotate.png" />
</Frame>

The rotate effect allows elements to be rotated up to 360 degrees.

### Stretch

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-stretch.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=890775aab4bdbe8f8ab75c930f31dfb4" alt="Text stretched vertically" width="2400" height="1200" data-path="images/effect-stretch.png" />
</Frame>

The stretch effect allows elements to be stretched in or out along an x,y axis.

### Backdrop filter

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-backdropfilter.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=95e596a49fb77f6e6e142fd07284f275" alt="Munu open with the page contents blurry and showing through " width="2400" height="1200" data-path="images/effect-backdropfilter.png" />
</Frame>

Backdrop filter effects fill the element it’s applied to and interacts with the content in or behind it. Common uses are background blurs or desaturating an image.

***

## Text effects

<Frame>
  <img src="https://mintcdn.com/standards/ehCcBR584ReEZevk/images/effect-text.png?fit=max&auto=format&n=ehCcBR584ReEZevk&q=85&s=835bfc6ea24e42c7fc4a69eb212cbe36" alt="Guides on type specimen showing cap height and baseline" width="2400" height="1200" data-path="images/effect-text.png" />
</Frame>

Text effects are special effects that enhance text elements.

### Baseline

Show the **baseline**, the invisible line upon which most letters sit.

### Cap Height

Show the **cap height**, the distance from the **baseline** to the top of a capital letter

### X-Height

Show the **x-height**, the height of lowercase letters that don’t have ascenders or descenders