---
title: "Designing Logos with CSS3"
source: "https://docs.nexcess.com/software/kadence/solid/academy/designing-logos-with-css3/"
description: "https://vimeo.com/26172472 Learn how to use CSS3 to create a logo with effects previously only possible using an image editor. The logo created in the webinar \"…"
vertical: "Software"
area: "Academy"
date: "2023-08-15"
last_modified: "2023-08-15"
---

# Designing Logos with CSS3

Learn how to use CSS3 to create a logo with effects previously only possible using an image editor. The logo created in the webinar “Designing Logos with Photoshop” is reproduced entirely using CSS3.

 Duration: **1 hour 8 minutes**  
- Creating the Logo Block Structure (1:24)
- Styling the Inside of the Logo Block with Gradient (2:50)
- Styling the Inner Span and Font with Shadow (5:55)
- Adjusting the Padding (9:05)
- Setting the Font Weight and Letter Spacing (10:10)
- Adding the Outside Border and Border Radius (19:50)
- Discussing Gradient Cross Browser Support (27:05)
- Adding a Box Shadow (40:50)
- Adding a Mouseover Lifting Hover Effect (43:06)
- Fixing Disappearing Scrollbar with Overflow-y (45:33)
- Additional Tweaks, and Q&A (46:25)