cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <div class="halo"></div>
  <span class="intro intro--the">The</span>
  <span class="intro intro--num">first #1</span>
  <span class="intro">vintage typeface</span>
<div class="vintage__container">
  <p class="vintage vintage__top">VINTAGE</p>
  <p class="vintage vintage__bot">VINTAGE</p>
  <span class="outro">NO.01</span>
  <span class="outro outro--big">TYPEFACE RECREATED</span>
  <span class="outro">CSS</span>
  <span class="outro outro--smart">smart cookie</span>
              @import url(https://fonts.googleapis.com/css?family=Satisfy); 
@import url(https://fonts.googleapis.com/css?family=Six+Caps);

body {
  background: url(http://api.thumbr.it/whitenoise-361x370.png?background=15424fff&noise=166f9e&density=100&opacity=61);
  text-align: center;

.halo {
  background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.6));
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  pointer-events: none;

.intro {
  color: rgb(230, 200, 160);
  display: block;
  font-family: 'Satisfy', cursive;
  font-size: 32px;
  text-shadow: 1px 1px black;
  transform: rotate(-10deg);

.intro--the {
  transform: rotate(-10deg) translate(-20px, 15px);

.intro--num {
  background: rgb(240, 200, 160);
  border: 1px dotted rgb(20, 60, 80);
  color: rgb(20, 60, 80);
  display: inline-block;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bolder;
  padding: 4px 6px 2px;
  position: absolute;
  text-shadow: none;
  transform: rotate(-10deg) translate(20px, -25px);

.vintage__container {
  display: inline-block;
  margin: 25px auto 40px;

.vintage {
  font-family: 'Six Caps', sans-serif;
  font-size: 192px;
  letter-spacing: 10px;
  line-height: 1;
  margin: 0;
  position: relative;

.vintage__top {
  background: linear-gradient(rgb(240, 220, 200), rgb(230, 200, 160));
  -webkit-background-clip: text;
  background-clip: text;
  position: absolute;
  z-index: 1;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

.vintage__bot {
    2px 1px rgb(85, 10, 0),
    4px 2px rgb(90, 15, 5),
    6px 4px rgb(100, 20, 15),
    8px 5px rgb(105, 25, 20),
    10px 6px rgb(110, 30, 25),
    12px 7px rgb(115, 30, 30),
    14px 8px rgb(120, 30, 35),
    16px 9px black,
    18px 10px black,
    20px 11px black,
    22px 12px black,
    24px 13px black,
    28px 14px rgba(0, 0, 0, 0.9),
    30px 15px rgba(0, 0, 0, 0.7),
    32px 16px rgba(0, 0, 0, 0.5),
    34px 17px rgba(0, 0, 0, 0.3),
    36px 18px rgba(0, 0, 0, 0.1),
    40px 20px rgba(0, 0, 0, 0.1);

.outro {
  color: white;
  font-family: 'Satisfy', cursive;
  font-size: 16px;

.outro--big {
  font-family: sans-serif;
  font-size: 24px;

.outro--smart {
  display: block;

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................