CSS Art – How to Make a Space Shuttle – Orbiter

Introduction

Space shuttle orbiters did numerous missions. They delivered astronauts, satellites, repair parts to and from the International Space Station (ISS).

For the second article in our space shuttle series, we will create it with CSS. If you haven’t read the space shuttle rocket article, you can check it out here.

We will be using different CSS technologies in this article, such as:

Visit our CSS Art articles if you’re unfamiliar with the above CSS technologies.

Preview

Space Shuttle Orbiter Preview

Our space shuttle orbiter consist of these components:

  1. Wing
  2. Forward Fuselage
  3. Cabin
  4. Cargo Bay
  5. Elevon
  6. Maneuvering Engine
  7. Main Engine
  8. Aft Fuselage
  9. Vertical Stabilizer

Check this webpage for detailed explanation of each component.

Prerequisites

We don’t assume prior knowledge of CSS or HTML, but it helps if you have some familiarity with how they work. Jump over to this article if you require an HTML and CSS primer.

We assume that you have set up tools to create CSS art. If you haven’t, this article will show you how to set them up.

HTML Structure

Here’s HTML code for space shuttle orbiter.

<div class="container">
  <div class="orbiter">
    <!-- Wing -->
    <div class="wing-bottom"></div>
    <div class="wing-upper"></div>

    <!-- Fuselage -->
    <div class="fuselage"></div>
    <div class="fuselage-window"></div>

    <!-- Cabin -->
    <div class="cabin"></div>

    <!-- Cargo Bay -->
    <div class="cargo-bay"></div>

    <!-- Elevon -->
    <div class="elevon"></div>
    <div class="elevon-left"></div>
    <div class="elevon-right"></div>

    <!-- Main Engine Left -->
    <div class="main-engine-left-connector"></div>
    <div class="main-engine-left"></div>

    <!-- Main Engine Right -->
    <div class="main-engine-right-connector"></div>
    <div class="main-engine-right"></div>

    <!-- Main Engine Top -->
    <div class="main-engine-top-connector"></div>
    <div class="main-engine-top"></div>

    <!-- Maneuvering Engine -->
    <div class="maneuvering-engine-right"></div>
    <div class="maneuvering-engine-left"></div>

    <!-- Aft Fuselage -->
    <div class="aft-fuselage"></div>
  </div>

  <!-- Vertical Stabilizer -->
  <div class="vertical-stabilizer"></div>
</div>

container is our outermost enclosure. This enables us to center the art and put a light gray border. The rest of divs represent each of our space shuttle orbiter section.

It’s important to keep the HTML structure as is for each component to display properly.

Are you ready to dive in to the code? Let’s create the wing component in the next section.

Wing

We will split the wing to two components. The bottom section and the upper section. First, let’s make the bottom section.

Bottom Wing

Bottom Wing

CSS Code:

.wing-bottom {
  position: absolute;
  height: 180px;
  width: 210px;
  top: 239px;
  left: 128px;
  background: var(--dark-green);
  clip-path: polygon(
    38% 0%,
    61.5% 0%,
    68% 42%,
    71% 55%,
    97% 88%,
    100% 100%,
    0% 100%,
    3% 88%,
    29% 55%,
    32% 42%
  );
}

We used CSS clip-path polygon() function to create the bottom wing. We gave it a dark green shade. The polygon() function is very useful when creating irregular shapes. You use percentages to control the position of the shape. Check this article for an in-depth explanation.

Next, let’s make the upper wing.

Upper Wing

Upper Wing

CSS Code:

.wing-upper {
  position: absolute;
  height: 140px;
  width: 203px;
  top: 279px;
  left: 132px;
  background: linear-gradient(
    to right,
    var(--gray) 0% 20%,
    var(--dark-gray) 50%,
    var(--gray) 80% 100%
  );
  clip-path: polygon(
    35% 0%,
    64% 0%,
    69% 40%,
    72% 52%,
    98% 88%,
    100% 100%,
    0% 100%,
    2% 88%,
    28% 52%,
    31% 41%
  );
}

Similar to the bottom wing, we used polygon() function to create the custom shape. If you look closely, the shapes are very similar.

Upper Wing Gradient

CSS Code:

background: linear-gradient(
  to right,
  var(--gray) 0% 20%,
  var(--dark-gray) 50%,
  var(--gray) 80% 100%
);

We used linear-gradient() to generate the gradient effect. Resulting in the above image.

Check this article for step-by-step explanation on how to create different CSS gradients.

Next, let’s create the forward fuselage.

Forward Fuselage

The forward fuselage houses the cockpit and is the command and control center for the orbiter.

Fuselage

CSS Code:

.fuselage {
  position: absolute;
  height: 63px;
  width: 51px;
  top: 160px;
  left: 208px;
  background: linear-gradient(
      to bottom,
      transparent 0 4px,
      var(--gun-metal) 4px,
      var(--gun-metal) 18px,
      transparent 18px,
      transparent 28px,
      var(--gun-metal) 28px,
      var(--gun-metal) 30px,
      transparent 30px
    ),
    linear-gradient(
      to right,
      var(--dark-gray) 0%,
      var(--gray) 20% 75%,
      var(--dark-gray) 100%
    );
  clip-path: path("M 0,63 Q 24,-63 49,63 z");
}

There’s a lot of code to make the fuselage. Let’s break it down. First up is the basic shape.

Fuselage Shape

CSS Code:

clip-path: path("M 0,63 Q 24,-63 49,63 z");

We used CSS path() function to create the custom shape. Take note that path() is different from polygon() function we used for the wings. The parameters in the function, M and Q, are SVG parameters.

Check this article for a step-by-step tutorial on how to make shapes with path().

Let’s explore how to make the gradient.

Fuselage Gradient

CSS Code:

linear-gradient(
  to right,
  var(--dark-gray) 0%,
  var(--gray) 20% 75%,
  var(--dark-gray) 100%
);

Similar to the upper wing, we’re giving our forward fuselage a gradient effect. CSS linear-gradient() gradient makes it have a rounder look.

Let’s make the fuselage horizontal stripes.

Fuselage Stripe

CSS Code:

linear-gradient(
  to bottom,
  transparent 0 4px,
  var(--gun-metal) 4px,
  var(--gun-metal) 18px,
  transparent 18px,
  transparent 28px,
  var(--gun-metal) 28px,
  var(--gun-metal) 30px,
  transparent 30px
);

We alternate between transparent and gun metal color to create the stripes. This alternating pattern may take some trial and error to make. Experiment by changing the pixel value and see how it affects the stripe height and position.

Let’s create the windows using CSS path() function and SVG.

Fuselage Window

CSS Code:

.fuselage-window {
  position: absolute;
  height: 23px;
  width: 51px;
  top: 200px;
  left: 208px;
  background: var(--gun-metal);
  clip-path: path(
    "M 8,14 h 3 v 3 L 8,19 M 9,11 l 4,-3 l 2,2 l -3,3 M 21,3 l -5,3 l 0,3 l 1,0 l 3,0 l 2,-4 M 27,3 l 4,3 l 0,3 l -3,0 l -3,-4 M 34,8 l 5,3 l -3,2 l -3,-3 z M 40,14 l -3,0 l 0,3 l 3,2 z"
  );
}

Yes, that’s a lot of SVG code inserted in the path() function. We won’t explain it in detail, but check this article for a step-by-step tutorial on how to make shapes with path().

In the following section, let’s create our cabin component.

Cabin

The cabin is simple to make. We combine rectangle and squares.

Cabin

CSS Code:

.cabin {
  position: absolute;
  height: 11px;
  width: 49px;
  top: 223px;
  left: 208px;
  background: linear-gradient(
    to right,
    var(--dark-gray) 0%,
    var(--gray) 20% 75%,
    var(--dark-gray) 100%
  );
}

/* Cabin Left Window */
.cabin::before {
  content: "";
  position: absolute;
  height: 6px;
  width: 5px;
  top: 2.5px;
  left: 17px;
  background: var(--silver);
  border-radius: 1px;
  border: solid 0.5px var(--gun-metal);
}

/* Cabin Right Window */
.cabin::after {
  content: "";
  position: absolute;
  height: 6px;
  width: 5px;
  top: 2.5px;
  left: 25px;
  background: var(--silver);
  border-radius: 1px;
  border: solid 0.5px var(--gun-metal);
}
Cabin Shape

CSS Code:

height: 11px;
width: 49px;

The height and width property controls the shape. The cabin is a horizontally elongated shape; hence our width property value is bigger than our height property value.

Cabin Gradient

CSS Code:

linear-gradient(
  to right,
  var(--dark-gray) 0%,
  var(--gray) 20% 75%,
  var(--dark-gray) 100%
);

Our gradient values are identical to the fuselage gradient.

Let’s create the cabin’s left and right window.

Cabin Left Window
Cabin Right Window


CSS Code:

/* Cabin Left Window */
.cabin::before {
  content: "";
  position: absolute;
  height: 6px;
  width: 5px;
  top: 2.5px;
  left: 17px;
  background: var(--silver);
  border-radius: 1px;
  border: solid 0.5px var(--gun-metal);
}

/* Cabin Right Window */
.cabin::after {
  content: "";
  position: absolute;
  height: 6px;
  width: 5px;
  top: 2.5px;
  left: 25px;
  background: var(--silver);
  border-radius: 1px;
  border: solid 0.5px var(--gun-metal);
}

The code for both left and right cabin windows are nearly identical. We use the left property to control the position of the window. For the left window it will be 17px and for the right window we set it to 25px.

Our cabin section is complete. Ready to make the cargo bay?

Let’s jump to the next section.

Cargo Bay

Cargo Bay

CSS Code:

.cargo-bay {
  position: absolute;
  width: 49px;
  height: 169px;
  top: 234px;
  left: 208px;
  background: var(--silver);
  background-image: linear-gradient(
      to bottom,
      transparent 0,
      var(--dark-gray) 0px,
      var(--gray) 1px,
      transparent 1px,
      transparent 41px,
      var(--dark-gray) 41px,
      var(--gray) 42px,
      transparent 42px,
      transparent 83px,
      var(--dark-gray) 83px,
      var(--gray) 84px,
      transparent 84px,
      transparent 126px,
      var(--dark-gray) 126px,
      var(--gray) 127px,
      transparent 127px,
      transparent 162px,
      var(--dark-gray) 162px,
      var(--gray) 163px,
      transparent 163px
    ),
    linear-gradient(
      to right,
      var(--dark-gray) 0%,
      var(--gray) 20% 75%,
      var(--dark-gray) 100%
    );
}

.cargo-bay::before {
  content: "";
  position: absolute;
  width: 23.5px;
  height: 169px;
  top: 0px;
  left: 0px;
  background: transparent;
  border-right: solid 1px var(--dark-gray);
}

Let’s split the cargo bay code to two sections. One section is for the basic shape, gradient and horizontal line. The other section is for the vertical line.

Cargo Bay Shape

CSS Code:

width: 49px;
height: 169px;

We use the width and height property to make the vertically elongated rectangle.

Cargo Bay Gradient

CSS Code:

linear-gradient(
  to right,
  var(--dark-gray) 0%,
  var(--gray) 20% 75%,
  var(--dark-gray) 100%
);

We’re using the identical gradient pattern here we used for the cabin and fuselage component.

Cargo Bay Horizontal Stripe

CSS Code:

linear-gradient(
  to bottom,
  transparent 0,
  var(--dark-gray) 0px,
  var(--gray) 1px,
  transparent 1px,
  transparent 41px,
  var(--dark-gray) 41px,
  var(--gray) 42px,
  transparent 42px,
  transparent 83px,
  var(--dark-gray) 83px,
  var(--gray) 84px,
  transparent 84px,
  transparent 126px,
  var(--dark-gray) 126px,
  var(--gray) 127px,
  transparent 127px,
  transparent 162px,
  var(--dark-gray) 162px,
  var(--gray) 163px,
  transparent 163px
)

Similar to what we did in the fuselage section, we alternate color and transparent areas to create the horizontal stripes.

Cargo Bay Vertical Stripe

CSS Code:

background: transparent;
border-right: solid 1px var(--dark-gray);

To create the vertical line, we first create a rectangle. We place it to the left side. We give the rectangle a solid 1px dark gray border. Then we set its color to transparent. The rectangle disappears, and only the right border appears on the screen.

In the next section, let’s tackle the elevon component.


Pyxofy Membership Sign Up

Elevon

Elevons control the aircraft’s pitch (elevator) and roll (aileron) functions.

Elevon

We have three sections for our elevon. The horizontal bar, left and right section. First, let’s create the horizontal bar.

Elevon Shape

CSS Code:

.elevon {
  position: absolute;
  height: 5px;
  width: 209.5px;
  top: 419px;
  left: 128px;
  background: var(--off-white);
  background-image: repeating-linear-gradient(
    to right,
    var(--gun-metal) 0% 1%,
    transparent 1% 2%
  );
  border: 0.5px solid var(--gun-metal);
}

The height: 5px; and width: 209.5px; gives us a thin, long rectangle.

Elevon Border

We put a thin, 0.5px, solid gun metal border with the below CSS code.

CSS Code:

border: 0.5px solid var(--gun-metal);

Next, let’s make the stripes.

Elevon Stripe

CSS Code:

repeating-linear-gradient(
  to right,
  var(--gun-metal) 0% 1%,
  transparent 1% 2%
);

Making so many stripes manually will be challenging.

Fortunately, we can use CSS repeating-linear-gradient() function to generate the stripes. Heres a step-by-step article on how to make repeating linear gradients.

Up next is the left elevon section.

Elevon Left

CSS Code:

.elevon-left {
  position: absolute;
  height: 16px;
  width: 73px;
  top: 425px;
  left: 125px;
  background: var(--off-white);
  clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 3% 46%);
  border-top: solid 3px var(--gun-metal);
}

.elevon-left::before {
  content: "";
  position: absolute;
  height: 9px;
  width: 2px;
  top: 0px;
  left: 41px;
  background: transparent;
  border-left: solid 1px var(--gun-metal);
  transform: skew(-8deg);
}

.elevon-left::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 73px;
  top: 4px;
  left: 2px;
  background: transparent;
  border-bottom: solid 3px var(--gun-metal);
  transform: rotate(8deg);
}

We need to split the left elevon in to three sections. First the basic shape and top border. Second is the horizontal stripe. Third is the bottom border.

1. Basic shape and top border.

clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 3% 46%);
border-top: solid 3px var(--gun-metal);

We give the shape a gun metal color.

2. Horizontal stripe.

border-left: solid 1px var(--gun-metal);
transform: skew(-8deg);

We use skew() to give the horizontal stripe a slight slant.

3. Bottom border.

border-bottom: solid 3px var(--gun-metal);
transform: rotate(8deg);

rotate() tilts the shape to match the shape of the elevon.

Let’s make the right elevon.

Elevon Right

CSS Code:

.elevon-right {
  position: absolute;
  height: 16px;
  width: 73px;
  top: 425px;
  left: 267px;
  background: var(--off-white);
  clip-path: polygon(0% 0%, 97% 0%, 100% 45%, 0% 100%);
  border-top: solid 3px var(--gun-metal);
}

.elevon-right::before {
  content: "";
  position: absolute;
  height: 9px;
  width: 2px;
  top: 0px;
  left: 35px;
  background: transparent;
  border-left: solid 1px var(--gun-metal);
  transform: skew(8deg);
}

.elevon-right::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 75px;
  top: 4px;
  left: 0px;
  background: transparent;
  border-bottom: solid 3px var(--gun-metal);
  transform: rotate(-8deg);
}

The right elevon is a mirror image of the left elevon. Check the code meticulously, you’ll find out slight differences between the left and right elevon code.

Now that we’ve finished the elevon component, let’s make the Aft Fuselage in the next section.

Aft Fuselage

The Aft Fuselage houses the orbiter’s engines.

Aft Fuselage

CSS Code:

.aft-fuselage {
  position: absolute;
  height: 44px;
  width: 29px;
  top: 404px;
  left: 197px;
  background: linear-gradient(
    to right,
    var(--dark-gray) 0%,
    var(--gray) 20% 75%,
    var(--dark-gray) 100%
  );
  border-radius: 40% 0% 0% 0% / 50% 0% 0% 0%;
}

.aft-fuselage::before {
  content: "";
  position: absolute;
  height: 44px;
  width: 29px;
  top: 0px;
  left: 42px;
  background: linear-gradient(
    to left,
    var(--dark-gray) 0%,
    var(--gray) 20% 75%,
    var(--dark-gray) 100%
  );
  border-radius: 0% 40% 0% 0% / 0% 40% 0% 0%;
}

.aft-fuselage::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 13px;
  top: 44px;
  left: 0px;
  background: var(--dark-gray);
  box-shadow: 64px 0 0 0 var(--dark-gray);
  z-index: -1;
}

Let’s make the left section first.

Aft Fuselage Left

CSS Code:

border-radius: 40% 0% 0% 0% / 50% 0% 0% 0%;

We used CSS border-radius to make the aft fuselage’s basic shape.

Aft Fuselage Left Block Gradient

CSS Code:

linear-gradient(   
	to right,
    var(--dark-gray) 0%,
    var(--gray) 20% 75%,
    var(--dark-gray) 100%
);

For the gradient, we make it go to the right. This gives the fuselage a more rounded shape.

Let’s work on the right section.

Aft Fuselage Right

CSS Code:

border-radius: 0% 40% 0% 0% / 0% 40% 0% 0%;

Same as the left section, we used border-radius to make our basic shape.

Aft Fuselage Right Gradient

CSS Code:

linear-gradient(
    to left,
    var(--dark-gray) 0%,
    var(--gray) 20% 75%,
    var(--dark-gray) 100%
  );

For the gradient, we set it to move in the left direction.

The final component in the aft fuselage are the blocks.

Aft Fuselage Left Block
Aft Fuselage Right Block

CSS Code:

background: var(--dark-gray);
box-shadow: 64px 0 0 0 var(--dark-gray);
z-index: -1;

We make a plain dark gray box. We used CSS box-shadow to replicate the shape and shift it 64px to the right.

Don’t forget to put z-index: -1;, this ensures that the blocks don’t cover the maneuvering engines that we’ll create in the next section.

Maneuvering Engine

Maneuvering engines give pilots fine grain control over the orbiter.

Maneuvering Engine

Let’s tackle the right maneuvering engine first.

CSS Code:

.maneuvering-engine-right {
  position: absolute;
  height: 12px;
  width: 13px;
  top: 447px;
  left: 250px;
  background: linear-gradient(
      to bottom,
      transparent 0 5px,
      var(--black) 5px,
      var(--black) 7px,
      transparent 7px,
      transparent 10px,
      var(--black) 10px,
      var(--black) 11px,
      transparent 11px,
      transparent 15px,
      var(--black) 15px,
      var(--black) 17px,
      transparent 16px
    ),
    linear-gradient(
      to right,
      var(--dark-green) 0%,
      var(--silver) 60% 70%,
      var(--dark-green) 90% 100%
    );
  clip-path: polygon(31% 0%, 72% 0%, 100% 100%, 0% 100%);
  transform: rotate(-15deg);
}
Maneuvering Engine Right

CSS Code:

clip-path: polygon(31% 0%, 72% 0%, 100% 100%, 0% 100%);
transform: rotate(-15deg);

We use CSS clip-path polygon() function to make the basic shape. We rotate it -15deg.

Maneuvering Engine Right Gradient

CSS Code:

linear-gradient(
	to right,
    var(--dark-green) 0%,
    var(--silver) 60% 70%,
    var(--dark-green) 90% 100%
);

Instead of gun metal, we give the maneuvering engine a dark green gradient.

Maneuvering Engine Right Stripe

CSS Code:

linear-gradient(
	to bottom,
    transparent 0 5px,
    var(--black) 5px,
    var(--black) 7px,
    transparent 7px,
    transparent 10px,
    var(--black) 10px,
    var(--black) 11px,
    transparent 11px,
    transparent 15px,
    var(--black) 15px,
    var(--black) 17px,
    transparent 16px
)

We used linear-gradient to create the two stripes.

Now, let’s make the left maneuvering engine.

CSS Code:

.maneuvering-engine-left {
  position: absolute;
  height: 12px;
  width: 13px;
  top: 447px;
  left: 202px;
  background: linear-gradient(
      to bottom,
      transparent 0 5px,
      var(--black) 5px,
      var(--black) 7px,
      transparent 7px,
      transparent 10px,
      var(--black) 10px,
      var(--black) 11px,
      transparent 11px,
      transparent 15px,
      var(--black) 15px,
      var(--black) 17px,
      transparent 16px
    ),
    linear-gradient(
      to right,
      var(--dark-green) 0%,
      var(--silver) 30% 40%,
      var(--dark-green) 90% 100%
    );
  clip-path: polygon(31% 0%, 72% 0%, 100% 100%, 0% 100%);
  transform: rotate(15deg);
}
Maneuvering Engine Left
Maneuvering Engine Left Gradient
Maneuvering Engine Left Stripe

The left maneuvering engine is a mirror image of the right maneuvering engine. Take a look at the code and see what we changed to make this mirror image.

Main Engine

Three main engines give the orbiter thrust during lift off.

Main Engine

For brevity, we will only explore the top engine, and it’s connector code.

With just a few adjustments, such as color and gradient direction, the code for the left / right main engine are almost identical to the top engine and connector code.

CSS Code:

/* Main Engine Top Connector */
.main-engine-top-connector {
  position: absolute;
  width: 15px;
  height: 10px;
  top: 440px;
  left: 224px;
  background: linear-gradient(
    to right,
    var(--dark-gray) 0% 20%,
    var(--gray) 35% 40%,
    var(--dark-gray) 80% 100%
  );
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 82% 100%, 18% 100%, 0% 75%);
}

.main-engine-top-connector::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 10px;
  top: 0px;
  left: 0px;
  background: repeating-linear-gradient(
    to bottom,
    var(--black) 5% 10%,
    transparent 10% 30%
  );
}

/* Main Engine Top */
.main-engine-top {
  position: absolute;
  height: 23px;
  width: 24px;
  top: 450px;
  left: 220px;
  background: linear-gradient(
    to right,
    var(--dark-gray) 0% 20%,
    var(--gray) 35% 40%,
    var(--dark-gray) 80% 100%
  );
  clip-path: polygon(27% 0%, 70% 0%, 100% 100%, 0% 100%);
}

.main-engine-top::before {
  content: "";
  position: absolute;
  height: 23px;
  width: 24px;
  top: 0px;
  left: 0px;
  background: repeating-linear-gradient(
    to bottom,
    var(--black) 6% 8%,
    transparent 8% 12%
  );
}

Let’s look at the connector first.

Top Main Engine Connector Shape

CSS Code:

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 82% 100%, 18% 100%, 0% 75%);

CSS clip-path polygon() is our tool of choice for making the connector and engine basic shape.

Top Main Engine Connector Gradient

CSS Code:

linear-gradient(
	to right,
    var(--dark-gray) 0% 20%,
    var(--gray) 35% 40%,
    var(--dark-gray) 80% 100%
);

Our connector’s gradient is a light gray color. Play around with the percentages to move the highlight location.

Top Main Engine Connector Stripe

CSS Code:

repeating-linear-gradient(
	to bottom,
    var(--black) 5% 10%,
    transparent 10% 30%
);

We simulate the stripes or grooves for the connector using repeating-linear-gradient.

Let’s make the top main engine next.

Top Main Engine Shape

CSS Code:

clip-path: polygon(27% 0%, 70% 0%, 100% 100%, 0% 100%);

Using polygon() we make a trapezoid shape.

Top Main Engine Gradient

CSS Code:

linear-gradient(
    to right,
    var(--dark-gray) 0% 20%,
    var(--gray) 35% 40%,
    var(--dark-gray) 80% 100%
);

We apply the same gradient pattern we used for the connector for the top main engine. The gradient makes the trapezoid shape more cone like, simulating the engine funnel.

Top Main Engine Stripe

CSS Code:

repeating-linear-gradient(
	to bottom,
    var(--black) 6% 8%,
    transparent 8% 12%
);

Our top main engine stripes are more fine, closer, compared to the connector. Play around with the percentages to change the distance between the stripes.

Onward to our last component, the vertical stabilizer.

Vertical Stabilizer

Vertical stabilizer with the rudder provide control, stability and trim in yaw (directional or weathercock stability).

Vertical Stabilizer

CSS Code:

.vertical-stabilizer {
  position: absolute;
  width: 15px;
  height: 98px;
  top: 403px;
  left: 224px;
  background: linear-gradient(
    to right,
    var(--dark-gray) 0% 25%,
    var(--off-white) 40% 65%,
    var(--dark-gray) 85% 100%
  );
  clip-path: polygon(63% 0%, 42% 0%, 21% 26%, 55% 89%, 86% 26%);
}

.vertical-stabilizer::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 98px;
  top: 0px;
  left: 0px;
  background: linear-gradient(
    to right,
    transparent 0 7px,
    var(--black) 7px,
    var(--black) 9px,
    transparent 9px
  );
}
Vertical Stabilizer Shape

CSS Code:

clip-path: polygon(63% 0%, 42% 0%, 21% 26%, 55% 89%, 86% 26%);
}

We’re viewing the vertical stabilizer from the top, giving it a very unusual, unique shape.

Vertical Stabilizer Gradient

CSS Code:

linear-gradient(
    to right,
    var(--dark-gray) 0% 25%,
    var(--off-white) 40% 65%,
    var(--dark-gray) 85% 100%
);
Vertical Stabilizer Stripe

The gradient gives the vertical stabilizer a more three-dimensional look.

CSS Code:

linear-gradient(
    to right,
    transparent 0 7px,
    var(--black) 7px,
    var(--black) 9px,
    transparent 9px
);

For the stripe, we use the linear-gradient, alternating between black and transparent color.

That’s it, we’re all done.

If you followed along this far, congrats and a big “Thank You”!

For those who want more, here’s a quick challenge.

Space Shuttle Rocket and Orbiter

Using the above image as reference, try to combine the rocket and orbiter together. All you need to do is experiment with the top and left property values to position the orbiter above the rockets.

You can see and play with the code at Pyxofy’s CodePen page.

See the Pen CSS Art – How to Make a Space Shuttle – Orbiter by Pyxofy (@pyxofy) on CodePen.

Conclusion

In this two part article series, we used many CSS functions and properties. We used clip-path’s polygon() and path() function to create custom shapes.

We used linear-gradient and repeating-linear-gradient to generate gradients and stripes, making the orbiter components more realistic.

This was a very challenging article, but we hope it helped you see how you can use CSS to make art. Share your masterpiece with us on Twitter @pyxofy, on LinkedIn, or Facebook.

We hope you liked this article. Kindly share it with your network. We really appreciate it.

CSS Art - How to Make a Space Shuttle - Rocket
Yes, you can create a space shuttle rocket with CSS. Join us in this two part step-by-step article series to find out how.
CSS Art
Articles for creating CSS Art.
Member Exclusive - Pyxofy
メンバー限定コンテンツ。Member exclusive content.
CSS Art – How to Make a Turntable
In this article you will learn how to use Hex colors and CSS pseudo-elements. Then we’ll make a simple turntable step-by-step.