A single <div> - that's it. No SVG, no clutter, just pure Vanilla CSS turning one tag into jaw-dropping art.
Why single div?
"You might wonder - this is amazing, amazingly useless!"
But,
Never let anyone tell you that your talents are without purpose, just because not all can think beyond the ordinary.
Let me tell you a backstory.
As a kid, I'd often come across those coloring exercises where you’d need to start with just a few colors say, red, yellow and blue to make every other shade. The trick was figuring out how they mixed, what was color theory and the relationship between them. That's how the limits actually showed you what’s possible when you combine them. You didn’t need to run out and grab purple; you could just blend red and blue.
That's how I really began to think beyond the usual, stretching CSS to its limits. It sharpened my knack for solving puzzles, spatial visualization and geometric intuition.
The Basics of Single-Div Art
Step 1: Study the shape and identify the building blocks or deconstruct it into basic shapes using reverse engineering.
What basic shape it is made up of?
(Circles, rectangles, triangles, curves?)Are there any symmetrical parts? (Easier to reuse or mirror)
Which parts are gradients or shadows?
Step 2: Once you know the building blocks, you can start creating them using some core tools/techniques.
Gradients
Gradients can be used for shading, highlighting or implying a light source. They can also be used to build flat multi color sections. So, they have three flavors: linear, radial and conic.
Linear gradients flow in a straight line, perfect for horizons, stripes and square/rectangular shapes.
Radial gradients burst out from center, perfect for circular objects.
Conic gradients twist around a point, handy for petals, wedges and triangular sections.
The background property can accept multiple gradients separated by commas, allowing you to stack them. So, layer them up and you've got depth without extra divs.
Always remember, the last one renders at the bottom and first one at the top. This is how you stack them:
background:
radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, rgba(255, 0, 0, 0) 50%),
radial-gradient(circle, rgba(0, 255, 0, 0.8) 0%, rgba(0, 255, 0, 0) 50%),
radial-gradient(circle, rgba(0, 0, 255, 0.8) 0%, rgba(0, 0, 255, 0) 50%);
Background size and positioning
These two properties can be used to adjust the size and position of your shape as you like. Background-size can be used to create tiling effects.
Checkerboard with conic gradient:
Each and every type of gradient in your stack can have its own size and position. You can add this using the following shorthand:
xpos ypos/width height
background:
linear-gradient( 0deg, #e0e0e0, #e0e0e0 ) 50% 25% / 8% 5%,
radial-gradient(white 0%, white 60%, red 60%, red 100%) 193px 32px/35px 35px no-repeat;
The linear gradient has 50% offset distance at its left, 25% from top, has 8% width and 5% height. You can do the same with radial and conic gradients.
Box-shadow: Faking shapes
Box shadows aren't there just for glow or shadow, it's a shape maker. For a single div you can stack multiple shadows with offsets and spreads, and you can mimic whole objects. You can create amazing pixelated CSS art. You just need to re-think of your drawing in terms of pixels, something like below:
You then create a single pixel and just mimic it with different offsets and spread. Of course, you need to pay attention to the order they are declared and play around with the offset values. Take a look at how the above can be achieved just using box-shadows:
Pseudo-Elements: Extra layers
With :before and :after your single divs gets two bonus layers. Position them absolutely and they're perfect for the below scenarios:
If you want to transform or animate specific layers, stacked background gradients won't work, especially if you only need to animate a few layers and not all of them.
If you want to have a specific shape that can be only achieved by using clip-path or border-radius, without affecting other layers.
Border Radius for curves
border-radius can help create blobs, circles, ovals, rounded corners. It not only rounds the corners but also affects the overall shape of the element. This can impact background images, gradients, and even any content within the element. For instance, if you have a background gradient, it will follow the curve of the rounded corners. If you don't want this behavior you can use different layer using :before or :after.
You can experiment with the types of blobs that you can create here.
Clipping
clip-path can cut a shape out of a div and helps you achieve complex shapes. This also affects overall shape of the element.
You can create circle(), ellipse() and inset().
The polygon() function lets you create custom shapes by specifying a series of points. The first point is the top-left corner, and the others define the edges of the shape.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
Let's start with a simple example
Let's draw the google logo just using a <div> and some gradients.
- Step 1: Identify and break down the logo into basic building blocks, something like this:
- Step 2: Now, figure out which shape to lay out first. Let's start with the outer circle which is a conic gradient and figure out the angles and color separations like below:
background:
conic-gradient(
rgba(234, 67, 53, 1) 11.5%,
rgba(255, 255, 255, 1) 11.55%,
rgba(255, 255, 255, 1) 22.05%,
rgba(66, 133, 244, 1) 22.05%,
rgba(66, 133, 244, 1) 39.5%,
rgba(52, 168, 83, 1) 39.55%,
rgba(52, 168, 83, 1) 69%,
rgba(251, 188, 5, 1) 69%,
rgba(251, 188, 5, 1) 82%,
rgba(234, 67, 53, 1) 82%
);
Now let's lay the white radial gradient in the center to hide the outer circle's axle:
radial-gradient(
circle,
white 0%,
white 43%,
transparent 43.4%,
)
Lastly, let's add that rectangular strip to complete the logo:
linear-gradient(to bottom, transparent 41.7%, rgba(66, 133, 244, 1) 41.5%, rgba(66, 133, 244, 1) 60.5%, transparent 60.5%, transparent 100%) 98% 0%/192px 400px no-repeat
So finally we have this:
If you read this far and loved it, check out some more single div CSS art created by me here.
About me?
I'm just a developer trying to find inspiration in everyday life, creating something meaningful with every line of code!
Top comments (1)
Nice work 👍