CSS Cross Generator

A cross or plus sign as one element instead of two crossed bars. Set how thick the arms are, or switch to the rounded plus and the X in the same tool.

About the CSS cross

A plus sign is two bars crossing, and that is exactly how it is usually built: an element with a horizontal bar and a ::before holding a vertical one. It works until you want the cross to be a single colour with transparency, or to sit on a gradient, or to have its own outline - at which point you can see the seam where the bars overlap.

As one twelve-point polygon there is no seam, because there are no two bars. There is one outline that happens to be cross-shaped, and it takes a background, a gradient or a photo like any other box.

The code

.shape {
  aspect-ratio: 1 / 1;
  clip-path: polygon(
      35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%,
      35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%
  );
  width: 240px;
  background: #0d6efd;
}

Twelve points, walked clockwise from the top-left of the upright bar. Every coordinate is one of four numbers - 0%, 35%, 65% and 100% - because the cross is symmetrical in both directions. The Arm width setting moves the 35 and the 65 towards or away from each other: at 5% you get a thin crosshair, and at 50% the arms are so fat that all that is left of the corners is four small squares.

Variants

Rounded plus - the same shape with an arc at each of the twelve corners. Softer, friendlier, and a much longer rule. This is the one to use for an "add" button.
X - the cross turned 45 degrees, built as its own polygon so it fits its box properly rather than overflowing it. Use it for close and dismiss buttons.
Frame - if what you actually want is a cross-shaped hole rather than a cross-shaped fill, that is a different problem; see the FAQ below.

A note on medical crosses

The equal-armed red cross on white is a protected emblem under the Geneva Conventions, not a generic first-aid icon, and its use is restricted by law in most countries. If you are marking something medical, the usual safe choices are a green cross for pharmacies in much of Europe, a blue Star of Life for emergency services, or simply a cross in your own brand colour. The shape itself is fine - it is the specific red-on-white combination in a medical context that is reserved.

Frequently asked questions

Should I use a CSS cross or a character like +?

For an icon inside a button, the character or an SVG is usually less work and lines up with text automatically. The clipped shape is worth it when the cross is a graphic element in its own right: a large one, a gradient-filled one, or one that has to be a precise size independent of the font.

How do I animate a plus into an X?

Rotate it. transform: rotate(45deg) with a transition turns the plus into an X in one line, and it is the smoothest possible version because nothing about the shape changes. Interpolating between the two polygons also works - they have the same twelve points - but rotation is cheaper and looks better.

Can I make a cross-shaped hole in a box?

Not with a plain polygon, which fills its outline. You can fake a simple hole by tracing the outer edge and the inner one in the same path, which is how the Frame preset works, and it holds up for shapes like this. For a genuine knock-out - a cross cut through to whatever is behind - use an SVG mask or two elements with mask-composite.

Why are my arms different widths?

The box is not square. The arm width is a percentage of each axis independently, so in a wide box the vertical bar is wider than the horizontal one is tall. Keep aspect-ratio: 1 / 1 and the two match exactly.

Menu