CSS Super Demo

Selectors & Specificity pseudo‑classes, pseudo‑elements, attribute, :has(), :is(), :where()

Specificity showdown

This box has style="border:3px solid orange" (inline > id > class). Click the buttons to toggle class & ID.

Attribute selector [data-role="admin"] outlines this element.

Form pseudos & parent `:has()`

Generated content & counters

::before/::after add labels and decorations.
::selection highlights selected text.
::marker styles list bullets (see checkmarks below).

Attribute selectors like a[href^="https"] add ↗ to external links.
External link · Internal link · PDF link

Box Model, Outline vs Border, Units & Typography

Content box with margin, border, padding, outline, and box-shadow.

content-box

border-box (preferred)

Common units: px, em, rem, %, vw/vh, vmin/vmax, ch, ex. Functions: calc, min/max/clamp.

80px 8em 8rem 15vw 20ch clamp(180px, 40vw, 360px)

Backgrounds, Gradients, Blends, Filters, Masks & Text Clip

Linear gradient background

Multiple backgrounds

Conic gradient, animated via @property

Background-clip: text — gradient-filled text

Masking with mask-image: radial-gradient(...)

Blend modes with mix-blend-mode

Placeholder — Filter demo: grayscale & contrast removed on hover

@supports(backdrop-filter) applies frosted glass.

Layout: Flexbox, Grid, Positioning, Multicolumn, Float & Shapes

Flexbox

1

2

3

4

5

Grid

A

B

C

D

E

Grid Template Areas

Header

Main

Positioning

I am sticky

Scroll the page; this sticky element sticks to the top (inside this box's scrollport).

Absolutely positioned

Float + `shape-outside`

Text wraps around a circular float because of shape-outside: circle(). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, saepe! Voluptate, porro excepturi! Dignissimos in expedita minima veritatis, dolore eveniet nemo commodi. Repellat, facere aspernatur nobis adipisci commodi amet eaque?

Multi-column layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, molestiae? Omnis, tempora impedit. Aspernatur, suscipit, totam. Eius dicta amet error voluptatibus minima reprehenderit placeat consectetur odit recusandae nulla, ea commodi.

Soluta pariatur, nesciunt laboriosam, totam cupiditate quasi asperiores porro ducimus tenetur. Ut fuga est voluptates consequuntur illo ab saepe ad, impedit veritatis non aut ex tempora dicta nisi, ipsam quo.

Odio sed et obcaecati voluptates numquam, a voluptas repellat dicta voluptatem blanditiis, similique id libero nam architecto at. Iste repellendus molestiae minus eius, ipsum dignissimos cum ipsam numquam, consequuntur voluptates!

Forms, Inputs, Validation, `accent-color`, and Resizable

Transforms, Transitions, 3D & Animations (with reduced-motion respect)

Hover me (3D)

Hover me (transition)

Scroll snap, anchor target, and stacking context

Card 1

Scroll horizontally (touchpad/touch) to snap.

Card 2

Each card uses scroll-snap-align.

Card 3

Try jumping to #card2.

Card 4

Smooth scrolling is enabled on html.

Stacking & z-index

z:1

z:2

z:3

Tables, Lists & Counters

Name	Qty	Price
Alpha	2	$9
Beta	5	$4
Gamma	1	$15

Ordered steps (custom counter)

Initialize
Process
Complete

Media Queries & Container Queries

Resize viewport to see @media change the grid.

prefers-color-scheme & prefers-reduced-motion are used globally.

Try printing this page to view @media print.

Resizable container (Container Query)

Card

Logical Properties & Writing Modes

This box uses padding-inline / padding-block and margin-block logical properties.

Vertical writing mode (vertical-rl)