FastCompiler
Open Compiler

CSS reference

Lesser-known CSS properties

Properties that quietly solve real problems but stay off most people's radar. Each one shows the input and a real rendered output, so you see the effect — not just a description.

Layout & box

Properties that shape sizing, alignment, and where elements sit — without a single media query.

writing-mode

Direction

Reorients text and layout from horizontal to vertical — or left-to-right. A tiny property that changes the whole composition of a block.

Input
.vertical {
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}
Output

Vertical text runs down the page — no images needed.

Great for side tabs, run-through typography, and CJK. Try it in the compiler

aspect-ratio

Sizing

Locks a box's width to height ratio. Give it one dimension and the other follows automatically — the modern way to reserve video space.

Input
.card {
  aspect-ratio: 16 / 9;
  background: #eef0ff;
  border-radius: 10px;
}
Output
Resize the window — the box keeps its 16:9 shape. Try it in the compiler

isolation

Stacking

Creates a fresh stacking context at that element, so absolutely-positioned children and z-index fights are contained inside it instead of leaking outward.

Input
.ui-header {
  isolation: isolate;
}
Output
Header with fresh stacking context
The child dot stays inside the header — no z-index escaping. Try it in the compiler

Text & type

Typography properties that polish the details — alignment, case, and spacing — hiding inside the CSS spec.

vertical-align

Inline

Among inline elements, vertical-align shifts alignment relative to the baseline — the culprit when "there's a mysterious gap below my image."

Input
img { vertical-align: middle; }
Output

Text box

Without vertical-align that box would sit on the baseline. Try it in the compiler

text-transform

Case

Rewrites casing in the browser without touching your HTML — uppercase, lowercase, capitalize, or full-width for CJK.

Input
.title { text-transform: uppercase; }
Output

written in lowercase html

Source stays clean; the presentation handles the look. Try it in the compiler

column (multi-column)

Layout

column-count/column-gap flow text into balanced columns — a print-style layout with two lines of CSS.

Input
.cols {
  columns: 2;
  column-gap: 28px;
}
Output

Long-form text flows naturally from the top of the first column into the second, like a printed magazine. The browser balances the height for you. No flex, no measuring — just declare the column count and let it reflow.

Great for testimonial lists and FAQ blurbs. Try it in the compiler

text-wrap

Type

text-wrap: balance evens up the last line of a heading — wrapping balanced lines instead of leaving a single orphan word.

Input
h2 { text-wrap: balance; }
Output

A heading with balanced wrapping sits on nicely

No more lonely words dropped onto the last line. Try it in the compiler

Visual effects

Filters and blends that do real image work in the browser — fading, glows, and color math with one declaration.

mask-image

Graphics

mask-image fades an element out using a gradient's alpha — a soft edge that a plain linear-gradient background can't give you.

Input
.fade {
  -webkit-mask-image: linear-gradient(
     90deg, #000, #000 55%, transparent);
  mask-image: linear-gradient(
     90deg, #000, #000 55%, transparent);
}
Output
A bold gradient pill that fades out here
The text is solid on the left, invisible on the right. Try it in the compiler

mix-blend-mode

Graphics

mix-blend-mode blends an element into what's behind it. difference inverts against the backdrop for a striking effect.

Input
.copy { mix-blend-mode: difference; }
Output
Inverted against the gradient
White text turned "negative" — pure color math, no images. Try it in the compiler

filter: drop-shadow()

Graphics

Drops a shadow around the element's actual painted shape (including transparent PNGs and clipped SVG), unlike the rectangular box-shadow.

Input
.logo {
  filter: drop-shadow(0 6px 12px
             rgba(79,70,229,.7));
}
Output
 logo
The glow follows the polygon's real silhouette. Try it in the compiler

Scroll & snap

Native, smooth scrolling UX — swipeable carousels and horizontal rails without a single line of JavaScript.

scroll-snap-type / margin

UX

scroll-snap-type on a container plus scroll-snap-align on children makes scroll stops land exactly on each card — a swipeable carousel in pure CSS.

Input
.cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.cards > * {
  flex: 0 0 60%;
  scroll-snap-align: center;
}
Output
Card 1
Card 2
Card 3
Card 4
Drag this strip sideways — it stops centered on each card. Try it in the compiler