About us | CSSline

Jyrki, Junnu, Vesa and Aki on stage — From left: Jyrki (@superfelipe), Junnu (@junnuvuorela), Vesa (@virlander) & Aki (@snellman) at the 2009 Grand One competition.

Origin

(2009 — 2012)

CSSline was founded in 2009 🚀 by @virlander, who was tired of CSS showcases like CSS Beauty and Stylegala 😴. Their selections were full of sites that felt ugly and boring. There was room for a showcase with better taste.

To get it off the ground, he teamed up with @superfelipe, another Valve developer, who built the custom backend. Together, they shipped v1 with jQuery ⚡ and CodeIgniter, hosting it first on Media Temple, then Slicehost, and finally Rackspace after the acquisition. It went live in 2009 and ran until v2 in 2020.

Thanks to our sales manager (@snellman), we sold 🤑 a copy of the backend to a mystery B2B buyer. That sale has kept CSSline ad-free ever since.

Redesigns

(2012 — 2020)

In 2012, @samnivala designed a new version of CSSline: a tighter grid, better type, a clearer experience. @junnuvuorela also made an Angry Birds-inspired 404 page. Neither ever shipped 😢.

Version 2

(2020 — 2025)

After @superfelipe moved to Reaktor, @virlander introduced CSSline to @tsuvinen after he joined Valve in 2016. Together, they rebuilt it over the years: Angular.js, then Angular 4, then React, then React+Next.js, and finally React+Razzle (Node, Razzle, React, Redux, Styled-components + Firebase). The first Angular version began in 2016; the Razzle site went live in 2020, hosted on Firebase.

Version 3

(2025)

After @tsuvinen moved to Columbia Road in 2020, @virlander kept v2 running. When breaking changes in Firebase slowed the site 🐌, he rebuilt it in Astro, keeping Firebase as its backend. The April–May 2025 redesign was the fastest CSSline redesign yet. Since moving to Astro, CSSline has continued to get small improvements every month.

Visual identity

(2009 — 2026)

The logo is by @meteufacik & @junnuvuorela, two designers whose work still holds up. The site grid and the rest of the look were designed by @virlander.

Featured badge

If your site is featured on CSSline, you can put one of these on your own site. Download the light or dark SVG to suit your page, link it to your listing’s permanent /go/ URL, and edit the colors in the SVG file if you need to.

Pill or stamp

Drop in a footer or credit row, or float it with the CSS below. For the stamp, use width="88" height="88" (or another size between 64 and 120). On a light page, add -light to the file name. Omit the class and CSS if you only want it in normal page flow.

<a
  class="cssline-badge-float"
  href="https://cssline.com/go/YOUR-LISTING/"
  aria-label="Featured on CSSline"
>
  <img src="/badges/featured-on-cssline.svg" width="112" height="40" alt="">
</a>

.cssline-badge-float {
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  position: fixed;
  z-index: 9999;
}

Tab

Fixed to the right edge of the viewport. Check that it clears navigation, consent banners, and mobile safe areas.

<a
  class="cssline-badge-tab"
  href="https://cssline.com/go/YOUR-LISTING/"
  aria-label="Featured on CSSline"
>
  <img src="/badges/featured-on-cssline-tab.svg" width="34" height="168" alt="">
</a>

.cssline-badge-tab {
  inset-block-start: 40%;
  inset-inline-end: 0;
  position: fixed;
  z-index: 9999;
}

About CSSline