CSS Playground

Experiment with CSS live in the editor below, then explore the most important CSS properties in the reference section.

✦ CSS Playground

▶ Live Output

CSS Quick Reference

Open each section below to explore important CSS properties.

📝 Text & Fonts

color:
font-size:
font-family:
font-weight:
text-align:
line-height:
letter-spacing:
text-transform:
text-decoration:

🎨 Backgrounds & Colors

background:
background-color:
background-image:
background-size:
background-position:
opacity:

📦 Spacing

margin:
padding:
margin-top:
margin-bottom:
padding-left:
padding-right:
gap:

📏 Sizing

width:
height:
max-width:
min-height:

🟩 Borders & Effects

border:
border-radius:
box-shadow:
outline:

📐 Display & Layout

display:
display:block;
display:inline;
display:flex;
display:grid;
overflow:

↔ Flexbox

flex-direction:
justify-content:
align-items:
flex-wrap:
flex-grow:

📍 Positioning

position:
top:
left:
right:
bottom:
z-index:

🔲 CSS Grid

grid-template-columns:
grid-template-rows:
place-items:

✨ Animation

transition:
transform:
animation:
@keyframes

🎯 Selectors

.class
#id
*
:hover
:focus
::before
::after