DEV Community


Posted on

CSS Only Image - Beginner

I have been wanting to try CSS only images for a very long time. When I found this sketch by Bruno Echenique Campanhã on google images I wanted to try it with only CSS.

Challenges Faced

  1. Creating concentric circles and lines in the background without any extra markups

Concepts learnt

  1. How to efficiently breakdown an image to divs (which should be nested and in which order)
  2. How to not use too many markups

CSS Properties learnt

  1. linear gradient
  2. radial gradient
  3. clip-path

Helpful Resources

  1. Clippy
  2. Shapy- Gradient shape editor by Victoria
  3. Starter course for absolute CSS Images begineer by Michael Mangialardi

Top comments (3)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.