CSS3 Playground

Instructions

  • 1Check out our examples. All designed in Webflow.
  • 2Select any element and style it using the right panel.
  • 3Resize your window or switch to a different device.
  • 3Check out the generated code. It's updated right away.
  • 4Sign up for an account!

UI Tutorial

Tutorial Video
Example 1

Buttons

Example 2

Text & Background Effects

Example 3

Typography

Breaking News

Federal Agents Raid Gunshop, Find Weapons

Store owner Steve Witmere previously arrested for blackmarket bazooka trading. Confesses to involvement in Russian mafia.

Among the numerous bazookas found in the gunshop were tens of thousands of illegally obtained paintings valued at at least $10,000. Thats a heavy price to pay for these dumb paintings.

Following the raid, which lasted 12 hours, FBI director Jesse Sanderman made this statment, “This is the biggest bazooka and stolen painting bust since 2009. We’re still on the look out for a fugitive under the pseudonym ‘Mountain Man’. Our sources say he’s connected to a painting smuggling ring. It seems he was the pervious owner of these crummy stolen paintings.”

Lakewood Stout

The Dark Beer of Lakewood, Colorado

The legendary stout was born out of the beautiful matrimony of a mountain man and his most beloved thing, the city of Lakewood in Colorado. The mountain man also loved his axe and his single-shot Remington rifle, but not as much as he loved his city. He dreamed of her flowy rivers and majestic mountains. So he named his greatest stout after her. Thus the glorious stout was birthed out of a mountain man’s heart.

“I crafted this glorious beer to express my undying love for my beautiful city.” - Mountain Man

Example 4

Images

Cat
i are not like teh pics
Cat
Ermahgerd percters!!
Cat
OH NOZ
Cat
my kitty Lakewood
Example 5

Responsive Columns

Design

Design

Drag & drop what you want on the page and tweak the style for all devices. Anything you can style in CSS, you can style in Webflow.

Export

Export

Just press a button and Webflow will generate clean, streamlined HTML & CSS, something a developer would write.

Launch

Launch

The code we generate works on all modern browsers and devices. Paste the code on your own server or let us host a link for testing and sharing.

Example 6

Newsletter Form

Example 7

Sign In Window

Example 8

Testimonials

I tried the Lakewood Stout when I went skiing in Colorado with my ex-wife’s brother’s cousin twice removed. I must say, this is one fine piece of hops and barley roaming all up in my palate. I can’t even count the flavanoids in this fine drank. What a treat! That mountain man will change the world.
Nerel Photo
Nerel Winterstorm
My family has been in Lakewood since my grand-grandpappy settled here during the 1848 gold rush. The only thing that made me happy was thinking about my old grand-grandpappy until I tried the mountain man’s Lakewood Stout. The brew changed my life! I have been a jolly fellow ever since.
Jonny
Jonny Goseman
Example 9

Transitions

Last Song
Belly of the Sharks
Bring on the Comets
Song of Los
Example 10

Precise Positioning

All Over the Place

You can purchase Lakewood Stout in Lakewood, San Francisco, Austin, Manhattan, Chicago, San Diego, and Havana.

Example 11

Product Grid

Skateboard
Takeover
4 Stars
$142.95
Buy Now
Skateboard
Hammer
4 Stars
$144.95
Buy Now
Skateboard
Grease Shark
4 Stars
$139.95
Buy Now
Skateboard
Voodoo Doll
4 Stars
$129.95
Buy Now
Skateboard
Voodoo D2
4 Stars
$139.95
Buy Now
Skateboard
Voodoo XI
4 Stars
$149.95
Buy Now
Example 12

Complex Footer

Example 13

For Funsies

I used Photoshop to build a website
It was terrible
One does not simply
write CSS3 radial gradients by hand
I don't always code...
but when I do I let Webflow do it for me
Example 14

Blank Stuff to Play With

Title

Subtitle

The coolest paragraph text ever. Hey there where ya goin', not exactly knowin', who says you have to call just one place home. He's goin' everywhere, B.J. McKay and his best friend Bear. He just keeps on movin', ladies keep improvin', every day is better than the last. New dreams and better scenes, and best of all I don't pay property tax. Rollin' down to Dallas, who's providin' my palace, off to New Orleans or who knows where. Places new and ladies, too, I'm B.J. McKay and this is my best friend Bear.

“Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.” - Mountain Man