CSS backface-visibility Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS backface-visibility property hiding the mirrored back of a card turned in 3D
Definition

Definition and Usage

The backface-visibility property sets whether the back of an element is drawn when a 3D turn points that side at you. The back is a mirror image of the front. Flat layout never shows it.

hidden is the value used on a flip card, so each side shows its own text. The initial value is visible. It is not inherited. Set it on the element you rotate with transform, usually rotateY() or rotateX(). The keyword changes in one step. There is no fade.

Standard-track.

Not deprecated and not experimental. Baseline widely available since March 2022. It belongs to CSS Transforms, and it only affects a 3D turn.

Syntax

CSS Syntax

syntax.css
backface-visibility: visible | hidden | initial | inherit;
Values

Property Values

ValueDescriptionTry it
visibleDefault. The back face is painted, so the content looks mirroredTry it
hiddenThe element is not painted when its back face points at the viewerTry it
initialSets this property to its default value, visibleTry it
inheritCopies this property from the parent elementTry it
Approach

How to Use backface-visibility

Turn the element in 3D, then choose whether the back face is painted.

  1. Turn the element with transform: rotateY(), rotateX(), or rotate3d(). The rotate property can do the same job with rotate: y 180deg. A flat rotate(180deg) has no back face.
  2. Set backface-visibility on that same element. The initial value is visible, and the property is not inherited.
  3. Use hidden when the back should stay undrawn, such as each side of a card.
  4. When the box contains separate faces, set transform-style: preserve-3d on the box. Add perspective on the scene so the turn has depth.
PieceRequired?Role
3D rotation on a boxYesrotateY(), rotateX(), or rotate3d() on a div or other box. A flat rotate() and a plain inline span do not show a back face
backface-visibilityYesvisible paints the back. hidden leaves it undrawn
perspectiveHelpsViewing distance. The mirror at 180 degrees still happens without it
transform-style: preserve-3dTwo facesLets each child face hide its own back
Try it

Live Preview

One card, turned with rotateY. Switch the keyword and the angle.

At 0° both keywords show Front. At 180°, visible mirrors it and hidden leaves it undrawn.

Card

backface-visibility: visible — The back faces you, so Front is mirrored.

Code

CSS Examples

Each snippet keeps the 3D turn and one keyword. Use Try It Yourself for a live editor.

Example 1 — Show the Mirrored Back

Turn a card 180 degrees and leave the back face painted.

CSS
<style>
  section {
    display: inline-block;
    padding: 16px;
    border: 1px solid #ccc;
    perspective: 400px;
  }
  div {
    width: 140px;
    height: 90px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 90px;
    transform: rotateY(180deg);
    backface-visibility: visible;
  }
</style>

<section>
  <div>Front</div>
</section>
Try It Yourself

How It Works

  1. Frame the card. inline-block, padding, and the border draw a stage that hugs the card. perspective: 400px is the viewing distance for the turn.
  2. Turn it around. rotateY(180deg) points the back face at you.
  3. Paint that face. backface-visibility: visible draws it, so the word Front is a mirror image. visible is the default, so leaving the line out looks the same.
  4. Center the word. Width, height, color, and line-height make one readable line. The keyword is what chooses the face.

Example 2 — Hide the Back Face

Same turn. The blue face is not painted.

CSS
<style>
  section {
    display: inline-block;
    padding: 16px;
    border: 1px solid #ccc;
    perspective: 400px;
  }
  div {
    width: 140px;
    height: 90px;
    background: #1d4ed8;
    color: #fff;
    text-align: center;
    line-height: 90px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
  }
</style>

<section>
  <div>Front</div>
</section>
Try It Yourself

How It Works

  1. Same turn. The stage and rotateY(180deg) match Example 1, so the back still points at you.
  2. Skip painting. backface-visibility: hidden leaves that face undrawn.
  3. The frame stays. The border and the 90px layout box remain. Only the blue face is missing.
  4. The front still shows. At rotateY(0deg) the front points at you, so the word is drawn again. Use the live preview to compare 0° and 180°.

Example 3 — Two Faces, One Readable Side

Stack Front and Back. After the turn you read Back, the right way around.

CSS
<style>
  section {
    display: inline-block;
    padding: 16px;
    border: 1px solid #ccc;
    perspective: 400px;
  }
  .card {
    position: relative;
    width: 140px;
    height: 90px;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
  }
  .card div {
    position: absolute;
    inset: 0;
    text-align: center;
    line-height: 90px;
    color: #fff;
    backface-visibility: hidden;
  }
  .front {
    background: #1d4ed8;
  }
  .back {
    background: #0f766e;
    transform: rotateY(180deg);
  }
</style>

<section>
  <div class="card">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</section>
Try It Yourself

How It Works

  1. Stack the faces. position: relative on the card and absolute with inset: 0 on each face put Front and Back in the same 140 by 90 box.
  2. Prepare the back label. rotateY(180deg) on .back turns that face so its text reads normally after the card turns.
  3. Hide each back, then turn the card. backface-visibility: hidden is on both faces, and rotateY(180deg) is on .card. Front's back points at you, so Front is not painted. You read Back.
  4. Keep the faces in 3D. transform-style: preserve-3d on .card lets each face hide on its own. perspective on the section is the viewing distance. A hidden face also lets clicks through to the face that is showing.

Edge Cases & Pitfalls

If the face does not hide, one of these is usually why.

flat

A flat turn has no back face

rotate() and rotateZ() stay in the screen plane. hidden changes nothing. Use rotateY(), rotateX(), or rotate3d() on transform.

inherit

The parent value stays on the parent

The property is not inherited. A rotated child still shows its mirror until that child sets hidden, or sets inherit.

faces

Two faces need preserve-3d

The default transform-style is flat. Children are painted into the parent's plane first, so you see a mirrored Front. Set preserve-3d on the element that turns.

overflow

overflow can cancel preserve-3d

On the same element, overflow other than visible makes preserve-3d compute to flat. The two faces then collapse into one mirrored layer.

motion

A spin should respect reduced motion

Keep hidden on the faces either way. When the turn is animated with transition, a prefers-reduced-motion query should show the end state without the spin.

Compatibility

Browser Support

backface-visibility is a browser painting property for 3D transforms. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Since March 2022

backface-visibility

Unprefixed: Chrome 36+, Firefox 16+, Safari 15.4+, Edge 12+, Opera 23+. Internet Explorer 10 supports the property. Older WebKit builds need a prefix.

97% Unprefixed support
Google Chrome 36+ · 12+ with -webkit-
Full support
Mozilla Firefox 16+ · 10+ with -moz-
Full support
Apple Safari 15.4+ · 5.1+ with -webkit-
Full support
Microsoft Edge 12+
Full support
Opera 23+
Full support
Samsung Internet 3+
Full support
Internet Explorer 10+
Full support
backface-visibility Widely supported

Bottom line: Current browsers use the unprefixed property. Safari 5.1 through 15.3 and Chrome 12 through 35 need -webkit-backface-visibility. Firefox 10 through 15 needs -moz-backface-visibility. Internet Explorer 10 paints a single rotated face, and it ignores transform-style: preserve-3d, so the two-face card stays flat there. Android WebView supports the unprefixed property from version 37.

Remember

Key Takeaways

  • Role: show or hide the back face when a 3D turn points it at the viewer.
  • Default: visible draws a mirror of the front. hidden leaves that face undrawn.
  • Two faces: preserve-3d on the parent, and hidden on each face.
  • Scope: set it on the rotated element. It is not inherited. A flat rotate() has no back face.

One line: hidden is how a flip card shows one readable side after rotateY(180deg).

Frequently Asked Questions

It decides whether the back of an element is drawn when a 3D turn points that side at you. The back is a mirror image of the front.
The element is probably still facing you, or the turn is flat. hidden applies after the back faces the viewer, which means a 3D rotation such as rotateY or rotateX past 90 degrees. rotate() and rotateZ() stay flat, so there is no back face to hide.
visible paints the back face, so the text looks mirrored. hidden leaves that face undrawn. visible is the initial value. At 0 degrees both keywords look the same, because the front is toward you.
perspective sets the viewing distance and makes the turn look 3D. The mirror at 180 degrees still happens without it. transform-style: preserve-3d is required when a parent holds separate faces, so each face can hide its own back.
No. A rotated child keeps the default visible until you set the property on that child, or until you set inherit. Put it on the element that turns.
Unprefixed support is Chrome 36, Firefox 16, Safari 15.4, and Edge 12. Internet Explorer 10 supports the property. It is a browser painting property, not a Node.js, Deno, or Bun feature. Older Safari and Chrome needed a -webkit- prefix.

Next: background

Set color, image, position, and size on one element.

background tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

CSS backdrop-filter Property CSS background Property