How to Make an X Icon (Close Button) with CSS

Learn how to create a crisp, scalable X icon (close button) with pure CSS. Below are two reliable methods plus centering tips and quick customization ideas.

Live Preview: X Icon (Close Button)

Method 1: Using Pseudo-elements

.x-icon {
  position: relative;
  width: 120px;
  height: 120px;
}
.x-icon::before,
.x-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 10px; /* thickness of the strokes */
  background: #cd5454;
  transform-origin: center;
  border-radius: 4px; /* optional: rounded stroke ends */
}
.x-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.x-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Center the whole icon on the page (optional) */
.x-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.x-icon {
  position: relative;
  width: 120px;
  height: 120px;
}
.x-icon::before,
.x-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 10px; /* thickness of the strokes */
  background: #cd5454;
  transform-origin: center;
  border-radius: 4px; /* optional: rounded stroke ends */
}
.x-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.x-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Center the whole icon on the page (optional) */
.x-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using Background Gradients

.x-icon {
  width: 120px;
  height: 120px;
  background:
    linear-gradient(45deg, transparent 46%, #cd5454 46%, #cd5454 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #cd5454 46%, #cd5454 54%, transparent 54%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Center the whole icon on the page (optional) */
.x-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.x-icon {
  width: 120px;
  height: 120px;
  background:
    linear-gradient(45deg, transparent 46%, #cd5454 46%, #cd5454 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #cd5454 46%, #cd5454 54%, transparent 54%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Center the whole icon on the page (optional) */
.x-icon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

How This Works

The pseudo-element method places two absolutely positioned bars on top of each other and rotates them ±45 degrees to form the X. You control line thickness via the height of those bars and can add rounded ends with border-radius.

The gradient method draws two diagonal stripes using layered linear-gradient backgrounds. By adjusting the percentage stops (e.g., 46%-54%), you can control the stroke thickness without extra elements.

How to Center Content Inside a X Icon (Close Button)

The easiest way to center an inner label or icon is to use Flexbox or Grid on the same element that draws the X.

Method 1: Use CSS Flexbox

.x-icon {
  /* your X styles here (pseudo-elements or gradients) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Example: center an "×" character or SVG inside the box */
.x-icon span {
  font-size: 28px;
  color: #cd5454;
}

.x-icon {
  /* your X styles here (pseudo-elements or gradients) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Example: center an "×" character or SVG inside the box */
.x-icon span {
  font-size: 28px;
  color: #cd5454;
}

Method 2: Use CSS Grid

.x-icon {
  /* your X styles here (pseudo-elements or gradients) */
  display: grid;
  place-items: center;
}

/* Example: center an "×" character or SVG inside the box */
.x-icon span {
  font-size: 28px;
  color: #cd5454;
}

.x-icon {
  /* your X styles here (pseudo-elements or gradients) */
  display: grid;
  place-items: center;
}

/* Example: center an "×" character or SVG inside the box */
.x-icon span {
  font-size: 28px;
  color: #cd5454;
}

When to Use Each Shape Method

Use pseudo-elements when you want fine control over stroke thickness, rounded ends, and hover animations on individual lines. Choose background gradients for a zero-extra-element approach that is easy to scale and doesn’t rely on pseudo-elements, which can simplify component integration and reduce layout complexity.

Quick Customizations

Change the color by replacing #cd5454 with any brand color; adjust stroke thickness by changing height in the pseudo-element method or the percentage band (e.g., 46%-54%) in the gradient method. Add a hover effect by transitioning filter, opacity, or transforming the lines slightly.

Accessibility & SEO

Use a semantic button element with aria-label=”Close” and ensure a tap target of at least 44×44px for accessible, screen-reader-friendly close controls.