How to Make a Folder “Slit” Effect With CSS

The “Slit” Effect: Peeking UI Elements Out From Under a Cover

Imagine a credit card half-visible inside a wallet, or a sheet of paper poking out of a folder just enough to identify it. That visual cue—a glimpse of something emerging from an opening—is a “slit” effect. While it sounds like the sort of thing that needs fancy JavaScript or image editing, you can build it entirely with CSS.

Building the Dimensional Shadow

The first element you need isn’t the visible content—it’s the shadow that sells the illusion of depth. Crucially, this isn’t made with box-shadow or a drop-shadow() filter. Instead, the shadow is its own DOM element: a small upright rectangle with a gradient background.

The gradient should be darker in the center and taper off at the edges. Once you apply a blur() filter to this element, the darker middle creates a realistic, dimensional crease—exactly what a slit looks like in the real world.

The rest of the design depends on layering. The left half of this blurred rectangle is covered by another element—the “cover.” The cover’s background color must exactly match its container’s background so it visually blends in, effectively hiding the left side of the shadow and leaving only the right portion exposed as the genuine shadow.

Both the cover and the shadow are then shifted slightly to the left (by 25px in the demo) so they appear layered rather than perfectly stacked.

Stacking the Elements

In the reference implementation, <main> is set to a single-column CSS Grid. The cover, the shadow, and the actual content (the “peeking” image) are all made full-width grid items after that, meaning they stack right on top of each other:

main > div {
  grid-area: 1 / 1;
}

Now all three occupy the same grid area. The .slit-cover element gets a width of 50%, which naturally exposes the element beneath its right side. Then a transform translates it by -50%—plus that 25px left shift to keep the shadow visible:

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

The result is the cover hiding the left part of the content while the right segment peeks over the shadow, producing the classic slit appearance.

Adapting the Cover to Any Background

For the effect to work cleanly, the cover must perfectly match what’s behind it. The easiest route is inheriting the container’s background color. That handles flat, solid colors without much effort. For more complex backgrounds, CSS masks and blend modes are viable alternatives, depending on the design’s requirements.

Flexibility and Variations

This isn’t a rigid formula. The stacking itself could just as easily be done with flexbox. The shadow could theoretically be rendered with box-shadow, a drop-shadow() filter, or even an SVG filter rather than a standalone blurred element—though an independent element keeps things more adaptable for animation and responsive tweaks.

The concept invites plenty of riffs—swap the side the image emerges from, alter the blur() radius for a softer or shallower cut, or change the palette. The shadow doesn’t even need to be a straight line; a curved crease would work just as well with minor tweaks to the gradient and cover’s shape.