Shapes

§Load the module

theme/utils/shapes.css is optional, like the sizing and layout modules - no component depends on it. Load it after the token file. Every class is a zero-specificity :where() rule in @layer utilities, so it overrides component styles (a card becomes a leaf, a btn gets a hard shadow) and any rule of your own overrides it.

<link rel="stylesheet" href="../theme/utils/default-semantic-tokens.css">

<!-- optional module: corners, clips, edges, shadows, frames, patterns -->

<link rel="stylesheet" href="../theme/utils/shapes.css">

§Radius scale

The theme's own radius tokens as classes - rounded-sm to rounded-xl follow --radius, so a square theme (Doom 64) and a pill theme (ChatGPT) both stay true to themselves. rounded-full makes pills and circles.

§Organic and asymmetric corners

Plain border-radius recipes, so borders and box-shadows follow the curve. Leaves, tabs, speech bubbles, drops, arches and three blobs. --shape-round (default 2rem) sets the radius of the leaf, tab and bubble shapes.

Organic silhouettes built from overlapping circles in a mask: a four-petal flower, a six-petal flower, a daisy, a heart and a cloud. They are designed for a square box (aspect-ratio: 1) and look great on images and in accent colors.

§Cut, notch, scoop and squircle corners

Where the browser supports the native corner-shape property (Chromium 139+), these use it, so borders and shadows keep following the outline. Other browsers draw the same outline with clip-path (cut, notch) or mask (scoop), and corner-squircle falls back to a plain round corner. --shape-cut (default 0.75rem) sets the size of the cut.

Single-corner, paired and diagonal cuts, a single notch or scoop, a folder tab, a folded page corner (dog-ear), a postage stamp with perforated edges, and ticket / ticket-vertical with half-circle bites. These use clip-path / mask in every browser.

§Shape silhouettes

Geometric shapes for avatars, image crops, markers and decoration - every one is a shape-* class. They work on any element, including <img> and <video>. Keep text out of the sharp shapes (triangle, star, burst): the clip cuts off whatever it covers. The v0.9 clip-* names keep working as aliases of the same rules (clip-hexagon is shape-hexagon-2).

3D silhouettes

Silhouettes with light and shadow painted on their faces - a cube, a pyramid, faceted diamond, hexagon and star, a cut gem, a sphere, a cylinder and a coin. The shading is a background-image of translucent white and black over your background-color, so one class works in every color and theme (set the color with background-color, not the background shorthand). Designed for a square box.

Any flat silhouette becomes a solid 3D block with drop-shadow-extrude on a wrapper: six stacked 1px drop shadows add up to a 6px extrusion that follows the clipped outline. drop-shadow-float makes the shape hover above the page. --shape-ink sets the extrusion color.

The same classes on real images - a hexagon avatar row and a star-shaped crop.

§Arrows, chevrons, ribbons and bubbles

Directional shapes that can hold text: shape-parallelogram, shape-trapezoid, shape-arrow, shape-chevron (they chain into a step bar) and shape-ribbon for tags and banners. --shape-slant (default 1.5rem) sets how far the edges run; give the element at least that much inline padding. shape-message adds a speech-bubble tail - a transparent bottom border reserves the tail's space, so the text never runs into it.

More directions and banners: arrows pointing left, both ways and down, a left chevron, a price shape-tag with a punched hole, a swallowtail shape-banner, a shape-bookmark and a triangular shape-pennant. shape-chevron-down stacks into a vertical process. Bubbles come with the tail at the bottom end (shape-message-end), at the top (shape-message-top) or pointing left (shape-callout-left); --shape-tail sets the tail size.

§Section edges

Edges for page sections: hero bands, feature strips, footers. --shape-edge (default 2.5rem) sets the depth. The slant, skew, point, notch and torn edges use clip-path, the curve edges border-radius (so a border follows them), and the concave, zigzag, scallop, wave and crenel edges a mask. Zigzag, scallop and wave also come as -top variants. Leave bottom padding at least as deep as the edge.

§Stylized shadows

Shadows with a character: hard offset (brutalist), smooth layered depth, a floating card, an inset well, a glow, a focus-style ring, a 3D key edge, a long flat-design shadow and soft UI (shadow-neu - best on --muted or --background). --shape-ink recolors the hard, glow, ring, edge and long shadows. shadow-lift rises on hover and keyboard focus (without motion when reduced motion is requested). Further styles: an outlined offset copy, two- and five-color retro offsets in the chart palette, a solid 3D shadow-extrude, a tinted shadow-colored, a bottom-only shadow, a hairline, a hard inset, a raised shadow-bevel, a shadow-neon glow, and a die-cut shadow-sticker. Piles of sheets have their own section: Stacks.

Aura

An animated light around an element - DaisyUI's aura, same class names. aura is a wrapper: its background is the light, a conic gradient turning on a typed @property angle, and the element inside covers the middle, so a ring of light runs around it. aura-dual sends two lights, aura-rainbow, aura-holo, aura-gold and aura-silver swap in a material, and aura-glow turns the ring into a blurred halo behind the element. --shape-ink colors the plain, dual and glow light, --shape-round matches the wrapped element's radius (default --radius-xl, a card), --shape-duration sets one turn. The wrapper is block-level, like the card it usually wraps - in a flex row it hugs its content; around an inline element elsewhere, add w-fit. Under reduced motion the light stands still.

A clip-path or mask also cuts off the element's own box-shadow. To give a clipped shape a shadow, put drop-shadow or drop-shadow-hard on a wrapper element: the filter follows whatever the wrapper paints, including the clipped outline.

§Stacks

A pile of sheets behind an element - three box-shadows, so they follow its radius and need no extra markup. The direction picks where the sheets peek out: stack-top, stack-bottom, stack-left and stack-right are centered and taper - every sheet a little narrower and one full step further out, like a pile of notifications - while stack-top-left, stack-top-right, stack-bottom-left and stack-bottom-right offset full-size sheets toward the corner. Modifiers set the step (stack-tight 4px, default 8px, stack-loose 14px), the fill (card sheets with a border by default, stack-outline hollow, stack-filled solid) and stack-fade, which fades every sheet further out. --shape-ink colors the outline edge or the filled sheets. A stack is the element's box-shadow, so it replaces a shadow-* class - and leave room around it. (Not the layout module's .stack, which is a flex column.)

§Frames

Borders and outlines as decoration: a double rule, a dashed border, a floating offset outline, an inset stitch line, L-shaped corner brackets (drawn with background-image, so you keep your own background color) and a gradient border in the chart palette - plus a conic rainbow border, dotted, thick, inset-rule, ridge, groove and hand-drawn frame-sketch borders, an accent bar and an underline, animated frame-marching-ants (static under reduced motion), an app frame-window with traffic lights, a frame-film strip, an instant-photo frame-polaroid, a perforated postage-stamp edge (frame-stamp - a mask, the element itself is punched), frame-tape strips on the top corners (::before / ::after), a neon-style frame-glow border and frame-notebook ruled paper with a margin line. --shape-ink recolors the tape and the glow.

§Background patterns

Background textures drawn with CSS gradients - dots, grid, lines (diagonal, horizontal, vertical, crosshatch), bold stripes, checker, zigzag, triangles, diamonds, chevrons, half-moon rings, ripples, polka dots, plaid, bricks, a blueprint grid and sunburst rays. pattern-mesh is a soft chart-color gradient backdrop for heroes, pattern-grain an SVG film grain. They default to a faint tint of the text color (currentColor), so they work on any surface in light and dark mode. --shape-ink sets the color and --shape-pattern (default 16px) the tile size.

§Mix it up

The shapes combine with each other and with the shipped components. Below: a hero band with a wave edge and a dot pattern, a brutalist pricing card with a ribbon tag, a coupon ticket, and a testimonial with a hexagon avatar and a speech bubble.

§Custom properties

All settings are optional custom properties with defaults. Set them inline or on a parent - they inherit, so one declaration on a section sets every shape inside it.

§Accessibility

Shapes are decoration: they never replace a label, and clipped text should stay inside the visible area. In forced-colors mode (Windows High Contrast) the browser removes box-shadows and background images, so every shadow-only or pattern-only silhouette gets a system-color outline instead. shadow-lift and frame-marching-ants drop their motion under prefers-reduced-motion: reduce. When you set a --shape-ink behind text, check the contrast yourself - the module only uses theme tokens and cannot know which one you picked.

Comments, ideas or improvements? Edit this page's source on GitHub