CSS3 Properties

CSS3 is the latest evolution of the Cascading Style Sheets language. Rather than being one monolithic release, CSS3 is split into independent modules — Animations, Flexbox, Grid Layout, Backgrounds and Borders, Transforms, Filters, and more — that browsers can implement and ship separately. Each module added new properties on top of the original CSS2 set, giving you rounded corners, gradients, shadows, animations, flexible and grid-based layouts, and visual filters without images or JavaScript.

This page is a quick-reference index of the properties introduced or significantly extended in CSS3, organized by the module they belong to. Each row links to a full chapter with syntax, values, and live examples.

If you are new to the language, start with the CSS Introduction and CSS Syntax chapters before diving into individual properties.

How to Use This Reference

• Find a property by group. The headings below mirror the CSS3 modules, so if you need a layout property look under Flexible Box Layout or Grid Layout; for motion look under Animation or Transitions; for visual effects look under Filter Effects or Transform Properties.
• Click through for details. Every property links to its own chapter with the full value list, defaults, and runnable demos.
• Mind browser support. CSS3 modules reached stable, unprefixed support at different times. Most properties below are safe in every modern browser, but always verify support for newer additions (for example, certain column-* properties) before relying on them in production.

A Note on Vendor Prefixes

While CSS3 modules were still experimental, browsers shipped properties behind vendor prefixes such as -webkit-, -moz-, -ms-, and -o-. You may still encounter them in older codebases:

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

For the properties listed below you almost never need prefixes today — write the standard, unprefixed name. Use prefixes only when you must support a legacy browser, and always list the standard property last so it overrides.

CSS3 vs. CSS2 — What Changed?

CSS2 covered the foundational box model, colors, fonts, and positioning. CSS3 built on that foundation with the following capabilities that were either absent or very limited before:

• Rounded corners and border images — border-radius, border-image
• Shadows — box-shadow, text-shadow
• Gradients and multiple backgrounds — background-size, background-clip
• Flexible and grid-based layouts — Flexbox (flex, align-items, …), Grid (grid, grid-template-columns, …)
• 2D and 3D transforms — transform, perspective
• Smooth state changes — transition
• Keyframe animations — animation, @keyframes
• Multi-column text — column-count, column-gap
• Visual filters — filter (blur, brightness, contrast, …)
• Custom transparency — opacity

List of CSS3 Properties

Animation Properties

Keyframe animations let you describe how an element transitions through a series of style snapshots. The @keyframes rule defines the snapshots; the animation-* properties attach and control them on an element.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Background Properties

CSS3 extended backgrounds to support sizing, clipping regions, and multiple layered images on a single element.

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Border Properties

CSS3 added rounded corners and image-based borders — features that previously required image hacks.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Color and Transparency

Filter Effects

The filter property applies graphical effects (blur, brightness, contrast, drop shadow, etc.) directly in CSS — no image editor required.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox is a one-dimensional layout model — it distributes items along a single axis (row or column) and handles alignment, spacing, and wrapping automatically.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

For a full walk-through see The Ultimate Guide to Flexbox.

Font Properties

Grid Layout

CSS Grid is a two-dimensional layout system — it places items into rows and columns simultaneously, making it ideal for page-level layouts and complex component grids.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Multi-Column Layout Properties

Multi-column layout flows content automatically across a set number or width of columns — similar to a newspaper layout.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Outline Properties

Text Properties

CSS3 added control over text overflow, wrapping, shadows, and fine-tuned decoration styling.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Transform Properties

Transforms move, rotate, scale, or skew elements in 2D or 3D space without affecting document flow.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Transition Properties

Transitions animate property changes from one value to another over a specified duration when a CSS property changes (e.g., on :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Transitions vs. animations: use transition for state-driven changes (hover, focus, active) — they are simpler to write. Use animation with @keyframes for independent, looping, or multi-step motion that runs without user interaction.

Visual Formatting Properties

Related References

Once you know which property you need, these chapters cover the most-used CSS3 features in depth:

• CSS Animation and @keyframes for keyframe-based motion.
• The Ultimate Guide to Flexbox for one-dimensional layout.
• grid and grid-template-columns for two-dimensional page layout.
• filter for blur, brightness, contrast, drop-shadow, and other graphical effects.
• transform and transition for visual effects and smooth state changes.
• border-radius and box-shadow for modern decorative styling.

Practice