Made this with CSS - no, but really. Here are examples of impressive CSS Art built by the tech community!

August 17, 2023 - But CSS artists take this property to a whole new level. Every element can have multiple shadows, each with a different color and size. With a few lines of code, you can quickly transform a single div into an intricate collection of shapes and colors. For example, the Mona Lisa portrait above uses just one element — with thousands of individual box-shadows.

3 weeks ago - See the Pen CSS Art: The Hipotenuse Illustration. ... This pure CSS illustration uses semantic HTML and advanced CSS properties like clip-path and transform to “draw” a complex, detailed character. ... See the Pen Kawaii Cat CSS Illustration. ... CSS box-shadow Examples CSS box-shadow examples for modern UI design.

A toplist display of pure CSS artworks, paintings and drawings.

October 31, 2023 - The Divtober challenge is creating CSS Art based on a daily prompt, utilizing only one single HTML div. Here is a post I wrote up looking at all 31 pieces from Divtober 2023.

Besides being a css gradient generator, cssgradient.io is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.

July 23, 2024 - A CSS illustration of a sword embedded in stone, created using only one HTML div. ... A pop art-styled glass illustration created using just an HTML div and CSS.

December 11, 2020 - In October, I took the time to watch Lynn Fisher (Twitter, CodePen), one of my favorite CSS artists, live-stream her single-div process. Somewhere in the back of my mind, I assumed single-div artwork relied on highly complicated box-shadows—almost a pixel-art approach.

Web designers use Cascading Style Sheets (CSS) language to create amazing interactive components on websites. Some artists enjoy creating web art with CSS - often animated art or realistic-looking objects. In this tutorial, you'll use CSS, and a little HTML, to play with emoji shapes and animations.

September 26, 2021 - I usually search for art and doodles and see if I like something, I don't copy anything and draw things in my own style, I just get inspiration from Pinterest. Other times, like in this egg CSS art, I got my inspiration simply because mum was making Eggs for herself and I thought "cool, I'll draw this with a face on it and make it with CSS".

July 20, 2020 - Here’s another classic art style painting that features a woman gazing upward. The details are soft and lovely. This CSS painting features a skull and a snake. It’s a super simple design but definitely compelling. This CSS painting features a faithful recreation of a Gameboy Color. Here’s another fantastic example of a CSS painting.

February 21, 2021 - One last concept that is incredibly helpful for making CSS art is pseudo-elements. Every single element on a page can actually be three elements: the main element, ::before, and ::after. You can style ::before and ::after as if they’re separate <div>s within any element. For example, I could have changed the .eyes container to have no .eye <div>s at all, and just style a ::before and ::after for each eye.

August 24, 2020 - Pure CSS art by the incredibly talented Diana Smith

December 13, 2020 - Assigning custom classes is especially essential to CSS art because the “drawing” process entails styling divs, which are otherwise indistinguishable from one another. There is a lot you can accomplish with the basics. Start small, and add new CSS properties to your toolkit as you grow. Consider the subcomponents of your graphic, then simplify. For example, apply a solidbackground-color before playing with gradient, and experiment with border-radius before using clip-path to generate custom shapes.

In this section, you will see the list of CSS Drawings that not only use a pure CSS but also only use a single div tag. That’s all. If you know other examples that are not be included here, feel free to suggest them in the comment below!

Below you'll find a collection of some of my personal favorite CSS Art pieces. Most of which can be found on codepen (where most of the CSS Art community share their warez). Codepen is great because you can also see (and edit) the code each artist wrote to generate their pieces.

CodePen doesn't work very well without JavaScript · We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen · Need to know how to enable it?

Ben says, “The main thing I have learned through all my CSS art is that man-made materials are a lot easier to draw with CSS than organic materials.” · Makes sense now that I think about it. The shapes and coloring of the lemons are much more complex than most man-made things. Ben even points to our Frontend Friend Oscar Salazar’s awesome glass ball as an example of glass done well in CSS!

July 7, 2010 - A great list that reunites some of the most impressive CSS drawings.