Search articles, tutorials, tips...
A deep dive into complex CSS gradients and multiple backgrounds to recreate the iconic Jolly Roger of the Straw Hat Pirates. This artwork uses no images or SVG.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Let's get acquainted with hibuno.com, Muhibbudin Suretno's personal portfolio, featuring free articles, tutorials, and open source projects.
Analisis mendalam tentang gradien CSS yang kompleks dan latar belakang ganda untuk menciptakan Jolly Roger ikonik Bajak Laut Topi Jerami. Karya seni ini tidak menggunakan gambar atau SVG.
This tutorial demonstrates how to leverage advanced CSS techniques—specifically, multiple radial-gradient and linear-gradient layers—to draw detailed illustrations, such as the famous Straw Hat Pirates flag from *One Piece*, using only one HTML element.
The entire skull and crossbones is constructed by layering various gradients within the background property of the main element (.one-piece) and its pseudo-elements (::before and ::after). Each gradient line and circle is a separate layer.
We use a single container element, setting a CSS Variable (--s) for easy scaling of the entire flag.
<div class="one-piece"></div>The main class .one-piece handles the skull, the crossbones (implicitly), and the distinctive straw hat. The layering is critical, starting from the skull's core and moving outward to the hat's details.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.one-piece {
--s: 200px;
height: var(--s);
aspect-ratio: 1;
position: relative;
background: radial-gradient(#000 70%, #0000 73%) 50% 57% / 7% 7%,
radial-gradient(#000 70%, #0000 73%) 39% 48% / 14% 14%,
radial-gradient(#000 70%, #0000 73%) 61% 48% / 14% 14%,
linear-gradient(#000 0 0) 50% 39% / 69% 2px,
linear-gradient(#000 0 0) 50% 35.8% / 59% 2px,
linear-gradient(#000 0 0) 50% 31% / 42% 2px,
radial-gradient(50% 100% at 50% 134%, #f0b114 98%, #0000) 50% 15% /
44% 19%,
radial-gradient(50% 84% at 50% 100%, #cf091a 98%, #0000) 50% 24% / 44%
16%,
radial-gradient(50% 23% at 50% 100%, #f0b114 98%, #0000) 50% 24% / 68%
20%,
radial-gradient(#fff 67.5%, #000 68.5% 70%, #0000 71%) 50% 34% / 47%
47%;
background-repeat: no-repeat;
}The ::before element is used to draw the crossbones, using multiple black linear gradients for the bone shape and white as the background color. The ::after element is used primarily for the **black circular flag background** and adds a subtle blurred border effect.
/* ::before: Creates the crossbones */
.one-piece::before {
content: "";
position: absolute;
inset: 55% 37% 20%;
border: 2px solid #000;
border-radius: 14% 14% 30px 30px / 50% 50% 30px 30px;
background: linear-gradient(#000 0 0) 78% 50% / 4% 43%,
linear-gradient(#000 0 0) 22% 50% / 4% 43%,
linear-gradient(#000 0 0) 50% 50% / 4% 47%,
radial-gradient(75% 57% at 50% 0, #0000 91%, #000 93% 98%, #0000),
radial-gradient(85% 76% at 50% 0, #0000 93%, #000 95% 98%, #0000) #fff;
background-repeat: no-repeat;
z-index: -1;
}
/* ::after: Creates the main circular flag and subtle outline */
.one-piece::after {
content: "";
position: absolute;
inset: 0;
padding: 10%;
z-index: -2;
filter: blur(4px) contrast(10);
background: radial-gradient(#fff 66%, #0000 71%) 10% 97% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 3% 90% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 97% 91% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 89% 98% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 89% 2% / 10% 11%,
radial-gradient(#fff 66%, #0000 71%) 98% 9% / 12% 10%,
radial-gradient(#fff 66%, #0000 71%) 2% 10% / 11% 10%,
radial-gradient(#fff 66%, #0000 71%) 9% 2% / 10% 11%,
linear-gradient(45deg, #0000 47%, #fff 0 53%, #0000 0) content-box,
linear-gradient(-45deg, #0000 47%, #fff 0 53%, #0000 0) content-box,
#000;
background-repeat: no-repeat;
}By carefully positioning and sizing dozens of simple gradients on three stacked elements, we successfully render a recognizable, complex graphic. This method showcases the power of pure CSS for graphic creation.