How to Make a Plus Sign (Cross) with CSS

Learn two clean, dependency-free ways to draw a crisp plus sign (cross) using only CSS. Copy, paste, and customize to fit your design.

Live Preview: Plus Sign (Cross)

Method 1: Using Layered Gradients

.plus {
  width: 150px;
  height: 150px;
  /* Two perpendicular bars made with layered gradients */
  background-image: linear-gradient(#cd5454, #cd5454),
                    linear-gradient(90deg, #cd5454, #cd5454);
  background-size: 30px 100%, 100% 30px; /* thickness x length */
  background-position: center center, center center;
  background-repeat: no-repeat;
  /* Center the element on the page */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using Pseudo-Elements (pixel-aligned centering)

.plus {
  position: relative;
  width: 150px;
  height: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate; /* creates a new stacking context; use z-index to layer content */
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: #cd5454;
}
/* Vertical bar */
.plus::before {
  width: 30px;
  height: 100%;
  left: calc(50% - 15px); /* can help avoid blur when sizes yield whole-pixel centers */
  top: 0;
}
/* Horizontal bar */
.plus::after {
  width: 100%;
  height: 30px;
  top: calc(50% - 15px);  /* can help avoid blur when sizes yield whole-pixel centers */
  left: 0;
}

How This Works

The gradient method stacks two linear-gradients on one element: one vertical and one horizontal. By sizing each gradient (background-size) and centering them (background-position), you get a clean cross without extra elements.

The pseudo-element method draws two absolutely positioned rectangles (::before and ::after) and centers each bar with calc() offsets. This can help avoid blur when the math resolves to whole CSS pixels; ensure both the container dimensions and the bar thickness place the center on whole pixels.

How to Center Content Inside a Plus Sign (Cross)

The easiest way is to turn the shape’s container into a Flexbox or Grid and center items. With the gradient method, this just works. With the pseudo-element method, make sure your in-flow content sits above the bars (use z-index as shown below).

Method 1: Use CSS Flexbox

.plus {
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.plus {
  display: grid;
  place-items: center;
}

Prevent content from being covered (pseudo-elements)

/* Use with the pseudo-element version above */
.plus {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate; /* creates a local stacking context */
}
.plus::before,
.plus::after {
  z-index: 0; /* bars behind */
}
.plus > * {
  position: relative;
  z-index: 1; /* content above bars */
}

Crisp Rendering Tips

  • Use even CSS pixel dimensions for both the container and the bar thickness so the center lands on whole pixels.
  • Ensure the computed positions land on whole CSS pixels. Either calc(50% – halfThickness) or translate(-50%, -50%) is fine if your dimensions align.
  • If you use transforms, verify the resulting center aligns to whole pixels to avoid blur on some screens.

When to Use Each Shape Method

Use layered gradients for a lightweight, single-element solution that scales smoothly and doesn’t require pseudo-elements. Use pseudo-elements when you need fine-grained control over each bar (e.g., different thicknesses, rounded ends, outlines, shadows) or when animating bars independently. When placing content inside, manage stacking so content sits above the bars.

Quick Customizations

Change the color by updating #cd5454. Adjust thickness by changing 30px in background-size (gradients) or the ::before/::after widths/heights.

Correct ways to add an outline

The earlier “inset box-shadow on the container” tip is misleading, it outlines the container’s inner edges, not the cross. Use one of these instead:

1) Add box-shadow to each bar (pseudo-elements):

.plus::before,
.plus::after {
  /* ...existing styles... */
  box-shadow: 0 0 0 2px #222; /* hard 2px outline around each bar */
}

2) Use filter: drop-shadow for a 1px silhouette outline (no background-color on the element):

.plus {
  /* Ensure no opaque background-color is set on this element */
  filter:
    drop-shadow( 1px 0 0 #222)
    drop-shadow(-1px 0 0 #222)
    drop-shadow( 0 1px 0 #222)
    drop-shadow( 0 -1px 0 #222);
}

Note: filter: drop-shadow() applies to the entire rendered element (including children and pseudo-elements). Use this on a wrapper that only contains the cross, or apply the filter to a separate wrapper/pseudo-element so inner content isn’t outlined.

3) Add extra background layers behind the bars (gradient method):

.plus {
  /* fill bars + outline bars behind them */
  background-image:
    /* fill (topmost) */
    linear-gradient(#cd5454, #cd5454),
    linear-gradient(90deg, #cd5454, #cd5454),
    /* outline (behind) */
    linear-gradient(#222, #222),
    linear-gradient(90deg, #222, #222);
  background-size:
    30px 100%, 100% 30px,
    34px 100%, 100% 34px; /* outline is 2px larger all around */
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

Accessibility & SEO

If the plus sign conveys meaning, include an accessible name and ensure sufficient color contrast:

<div class="plus" role="img" aria-label="Plus sign"></div>

If it’s purely decorative, hide it from assistive tech (e.g., aria-hidden=”true”).