CSS Art – How to Make a Space Shuttle – Orbiter
Space shuttle orbiters are amazing machines. Can we make it with CSS? You bet! Join us making it step-by-step.
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 Space Shuttle Orbiter Preview](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-final.png)
Our space shuttle orbiter consist of these components:
- Wing
- Forward Fuselage
- Cabin
- Cargo Bay
- Elevon
- Maneuvering Engine
- Main Engine
- Aft Fuselage
- 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 div
s 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 Bottom Wing](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-wing.png)
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 Upper Wing](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-wing-1.png)
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 Upper Wing Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-wing-2.png)
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 Fuselage](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-fuselage.png)
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 Fuselage Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-fuselage-1.png)
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 Fuselage Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-fuselage-2.png)
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 Fuselage Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-fuselage-3.png)
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 Fuselage Window](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-fuselage.png)
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 Cabin](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cabin.png)
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 Cabin Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cabin-1.png)
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 Cabin Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cabin-2.png)
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 Left Window](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cabin-3.png)
![Cabin Right Window Cabin Right Window](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cabin.png)
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 Cargo Bay](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cargo-3.png)
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 Cargo Bay Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cargo-bay.png)
CSS Code:
width: 49px;
height: 169px;
We use the width
and height
property to make the vertically elongated rectangle.
![Cargo Bay Gradient Cargo Bay Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cargo-1.png)
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 Cargo Bay Horizontal Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cargo-2.png)
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 Cargo Bay Vertical Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-cargo-3.png)
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.
![](https://www.pyxofy.com/content/images/2022/07/pyxofy-sign-up-banner-en-800.png)
Elevon
Elevons control the aircraft’s pitch (elevator) and roll (aileron) functions.
![Elevon Elevon](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon.png)
We have three sections for our elevon. The horizontal bar, left and right section. First, let’s create the horizontal bar.
![Elevon Shape Elevon Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon-1.png)
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 Elevon Border](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon-2.png)
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 Elevon Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon-3.png)
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 Elevon Left](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon-4.png)
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 Elevon Right](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-elevon-5.png)
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 Aft Fuselage](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft.png)
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 Aft Fuselage Left](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft-1.png)
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](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft-2.png)
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 Aft Fuselage Right](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft-3.png)
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 Aft Fuselage Right Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft-4.png)
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](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft-5.png)
![Aft Fuselage Right Block](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-aft.png)
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 Maneuvering Engine](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter.png)
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 Maneuvering Engine Right](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-1.png)
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 Maneuvering Engine Right Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-2.png)
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 Maneuvering Engine Right Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-3.png)
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](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-4.png)
![Maneuvering Engine Left Gradient Maneuvering Engine Left Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-5.png)
![Maneuvering Engine Left Stripe Maneuvering Engine Left Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter.png)
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 Main Engine](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine.png)
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 Top Main Engine Connector Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-1.png)
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 Top Main Engine Connector Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-2.png)
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 Top Main Engine Connector Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-3.png)
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 Top Main Engine Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-top.png)
CSS Code:
clip-path: polygon(27% 0%, 70% 0%, 100% 100%, 0% 100%);
Using polygon()
we make a trapezoid shape.
![Top Main Engine Gradient Top Main Engine Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-4.png)
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 Top Main Engine Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-engine-5.png)
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 Vertical Stabilizer](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-7.png)
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 Vertical Stabilizer Shape](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-stabilzer.png)
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 Vertical Stabilizer Gradient](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-8.png)
CSS Code:
linear-gradient(
to right,
var(--dark-gray) 0% 25%,
var(--off-white) 40% 65%,
var(--dark-gray) 85% 100%
);
![Vertical Stabilizer Stripe Vertical Stabilizer Stripe](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-7.png)
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 Space Shuttle Rocket and Orbiter](https://www.pyxofy.com/content/images/2022/07/pyxofy-css-art-space-shuttle-orbiter-rocket.png)
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.
Related Articles
![](https://www.pyxofy.com/content/images/2022/03/pyxofy-css-art-record-player-full-image.png)