Style StageA modern CSS showcase styled by community contributions. Maintained by Stephanie Eckles (@5t3ph) of ModernCSS.dev.2023-08-19T04:59:11Zhttps://stylestage.devStephanie EcklesYellowed by Sowmya Seshadri2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/yellowed/Ye Olde Book by Max Spuling2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/ye-olde-book/We Love Teal by Olivia Johnson2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/we-love-teal/Vibrant by Lakshmikant.K2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/vibrant/Vaporwave by Shannon Crabill2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/vaporwave/Transparency by Jens Oliver Meiert2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/transparency/Trafalgar by Mike Andrewartha2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/trafalgar/Sysfonts by Halvor William Sanden2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/sysfonts/Sweet N Sp00ky by Aiden Schrock2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/sweet-n-sp00ky/The Styles Must Go On! by Joe Lamyman2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/the-styles-must-go-on/Stageflix by Suckcoder2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/stageflix/StageOS by Håvard Brynjulfsen2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/stageos/Spectrum by Robert Manders2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/spectrum/SolidState by Maheshkumar2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/solidstate/Soff by Beatrice Bock2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/soff/Slide Stage by Thomas Tuvignon2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/slide-stage/Skewten by Donnie D'Amato2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/skewten/Simple Blue Roboto by JCarlosR2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/simple-blue-roboto/Shimmering Stars by Paola Ayala Zelaya2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/shimmering-stars/Shadows by Nadia Laasri2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/shadows/Severe with Rainbow by Lizard Morrow2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/severe-with-rainbow/Russian Inspiration by CandiceCz2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/russian-inspiration/Retroish by Jean Louise Tiston2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/retroish/Retro by Rachel B2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/retro/Retro Modern by Mike Aparicio2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/retro-modern/Retro Cyberpunk by Inès K.2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/retro-cyberpunk/Red Sand by UsrnGamesInc2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/red-sand/Rainbow by Nic Mayer2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/rainbow/Queer Modes by Miriam Suzanne2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/queer-modes/Purplify & Pastel by Dominic Duffin2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/purplify-and-pastel/Purpleland by Dawntraoz2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/purpleland/Propaganda by Maryam Hanafiah2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/propaganda/Plants on Pink by Nicole Ortiz2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/plants-on-pink/Plain'n'simple by Silvestar Bistrović2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/plainnsimple/Pink Outside The Box by GabbyKC2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/pink-outside-the-box/Pink Lime by Michelle Barker2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/pink-lime/Pilgrim by Gonçalo Morais2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/pilgrim/Pastels & Columns by Carol McKay2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/pastels-and-columns/Nightshade by Peter Byfield2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/nightshade/Neon by Pablo Jimenez2023-08-19T04:59:11.007Zhttps://stylestage.dev/styles/neon/Neon Beetles by Barbara Aliverti2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/neon-beetles/Neomorphism Design by Manoranjan D2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/neomorphism-design/MonoMinimal by Amit Sheen2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/monominimal/Modern stars by Alba Maldonado2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/modern-stars/Moccasin Stage by Gabriel Paixao2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/moccasin-stage/Mburucuya by Lide O.2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/mburucuya/Manual by Lynn Fisher2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/manual/Web 2.0 Lobster Party by Andy Bell2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/web-2.0-lobster-party/Liquid Style by Toni Rome2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/liquid-style/Jet Set by Cory Birdsong2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/jet-set/iStage by Bahe Yaich2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/istage/I Got The Blues by Jessica Nagar2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/i-got-the-blues/Headquarters by Stephanie Eckles2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/headquarters/Happy Halloween by Fredorixo2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/happy-halloween/Hackytoberfest by Jordana Harrison2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/hackytoberfest/Geocities by whitep4nth3r2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/geocities/Gallery by Olivia Ng2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/gallery/Fresh by Thomas Champion2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/fresh/Floral vibes by Neelam Chavan2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/floral-vibes/Final Frontier by Danielle Mayabb2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/final-frontier/Emphasis by d-cs2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/emphasis/Eighties Synthwave by Kevin Powell2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/eighties-synthwave/Drawing Board by Emma Grey2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/drawing-board/Drafter by Claudine Ong2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/drafter/DeSoto by Joey Imlay2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/desoto/Darkified by Arul Murugavel2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/darkified/Dark-Purple by Jayashakthi Vishnu P2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/dark-purple/Dark- Navy & Green by Vishal Sharma2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/dark-navy-and-green/CSS CLI by Ryan Mulligan2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/css-cli/Crawling Chaos by Adrian Bece2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/crawling-chaos/Comic by Katherine Kato2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/comic/Colorful Cards by Inklingboi2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/colorful-cards/Color Stages by Claire Lipskey2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/color-stages/Center Stage by Katie Langerman2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/center-stage/Calm by Tripti Nayak2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/calm/Bulletin by Paulo Nunes2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/bulletin/Boysenberry by Evan Thome2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/boysenberry/Borlandish by Vishwa.R2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/borlandish/Blueprint by Todd Libby2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/blueprint/Blue-Beast by Kiran Shrinivaas S2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/blue-beast/Barebones by Vinícius Philot2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/barebones/Atomic Clock by Eric Brown2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/atomic-clock/At The Desk by Tamás Tömördi2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/at-the-desk/Artsy Blue and Turquoise by Thea Kitzinger2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/artsy-blue-and-turquoise/Animado by Elisangela Silva2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/animado/AeroJet-505 by Charles Henri2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/aerojet-505/Abandoned Stage by Andrey Kudryavtsev2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/abandoned-stage/A Scottish Landscape by Alistair Shepherd2023-08-19T04:59:11.003Zhttps://stylestage.dev/styles/a-scottish-landscape/Style Stage2023-08-19T04:59:11Zhttps://stylestage.dev/Styles Directory2023-08-19T04:59:11Zhttps://stylestage.dev/styles/<h2 id="all-styles" tabindex="-1">All Styles</h2>
<ul class="features features__flexible"><li style="background-image: url('/style-img/a-scottish-landscape');">
<span>
<a href="https://stylestage.dev/styles/a-scottish-landscape/">A Scottish Landscape<span aria-hidden="true"></span></a>
<span>by Alistair Shepherd</span>
</span>
</li><li style="background-image: url('/style-img/abandoned-stage');">
<span>
<a href="https://stylestage.dev/styles/abandoned-stage/">Abandoned Stage<span aria-hidden="true"></span></a>
<span>by Andrey Kudryavtsev</span>
</span>
</li><li style="background-image: url('/style-img/aerojet-505');">
<span>
<a href="https://stylestage.dev/styles/aerojet-505/">AeroJet-505<span aria-hidden="true"></span></a>
<span>by Charles Henri</span>
</span>
</li><li style="background-image: url('/style-img/animado');">
<span>
<a href="https://stylestage.dev/styles/animado/">Animado<span aria-hidden="true"></span></a>
<span>by Elisangela Silva</span>
</span>
</li><li style="background-image: url('/style-img/artsy-blue-and-turquoise');">
<span>
<a href="https://stylestage.dev/styles/artsy-blue-and-turquoise/">Artsy Blue and Turquoise<span aria-hidden="true"></span></a>
<span>by Thea Kitzinger</span>
</span>
</li><li style="background-image: url('/style-img/at-the-desk');">
<span>
<a href="https://stylestage.dev/styles/at-the-desk/">At The Desk<span aria-hidden="true"></span></a>
<span>by Tamás Tömördi</span>
</span>
</li><li style="background-image: url('/style-img/atomic-clock');">
<span>
<a href="https://stylestage.dev/styles/atomic-clock/">Atomic Clock<span aria-hidden="true"></span></a>
<span>by Eric Brown</span>
</span>
</li><li style="background-image: url('/style-img/barebones');">
<span>
<a href="https://stylestage.dev/styles/barebones/">Barebones<span aria-hidden="true"></span></a>
<span>by Vinícius Philot</span>
</span>
</li><li style="background-image: url('/style-img/blue-beast');">
<span>
<a href="https://stylestage.dev/styles/blue-beast/">Blue-Beast<span aria-hidden="true"></span></a>
<span>by Kiran Shrinivaas S</span>
</span>
</li><li style="background-image: url('/style-img/blueprint');">
<span>
<a href="https://stylestage.dev/styles/blueprint/">Blueprint<span aria-hidden="true"></span></a>
<span>by Todd Libby</span>
</span>
</li><li style="background-image: url('/style-img/borlandish');">
<span>
<a href="https://stylestage.dev/styles/borlandish/">Borlandish<span aria-hidden="true"></span></a>
<span>by Vishwa.R</span>
</span>
</li><li style="background-image: url('/style-img/boysenberry');">
<span>
<a href="https://stylestage.dev/styles/boysenberry/">Boysenberry<span aria-hidden="true"></span></a>
<span>by Evan Thome</span>
</span>
</li><li style="background-image: url('/style-img/bulletin');">
<span>
<a href="https://stylestage.dev/styles/bulletin/">Bulletin<span aria-hidden="true"></span></a>
<span>by Paulo Nunes</span>
</span>
</li><li style="background-image: url('/style-img/calm');">
<span>
<a href="https://stylestage.dev/styles/calm/">Calm<span aria-hidden="true"></span></a>
<span>by Tripti Nayak</span>
</span>
</li><li style="background-image: url('/style-img/center-stage');">
<span>
<a href="https://stylestage.dev/styles/center-stage/">Center Stage<span aria-hidden="true"></span></a>
<span>by Katie Langerman</span>
</span>
</li><li style="background-image: url('/style-img/color-stages');">
<span>
<a href="https://stylestage.dev/styles/color-stages/">Color Stages<span aria-hidden="true"></span></a>
<span>by Claire Lipskey</span>
</span>
</li><li style="background-image: url('/style-img/colorful-cards');">
<span>
<a href="https://stylestage.dev/styles/colorful-cards/">Colorful Cards<span aria-hidden="true"></span></a>
<span>by Inklingboi</span>
</span>
</li><li style="background-image: url('/style-img/comic');">
<span>
<a href="https://stylestage.dev/styles/comic/">Comic<span aria-hidden="true"></span></a>
<span>by Katherine Kato</span>
</span>
</li><li style="background-image: url('/style-img/crawling-chaos');">
<span>
<a href="https://stylestage.dev/styles/crawling-chaos/">Crawling Chaos<span aria-hidden="true"></span></a>
<span>by Adrian Bece</span>
</span>
</li><li style="background-image: url('/style-img/css-cli');">
<span>
<a href="https://stylestage.dev/styles/css-cli/">CSS CLI<span aria-hidden="true"></span></a>
<span>by Ryan Mulligan</span>
</span>
</li><li style="background-image: url('/style-img/dark-navy-and-green');">
<span>
<a href="https://stylestage.dev/styles/dark-navy-and-green/">Dark- Navy & Green<span aria-hidden="true"></span></a>
<span>by Vishal Sharma</span>
</span>
</li><li style="background-image: url('/style-img/dark-purple');">
<span>
<a href="https://stylestage.dev/styles/dark-purple/">Dark-Purple<span aria-hidden="true"></span></a>
<span>by Jayashakthi Vishnu P</span>
</span>
</li><li style="background-image: url('/style-img/darkified');">
<span>
<a href="https://stylestage.dev/styles/darkified/">Darkified <span aria-hidden="true"></span></a>
<span>by Arul Murugavel</span>
</span>
</li><li style="background-image: url('/style-img/desoto');">
<span>
<a href="https://stylestage.dev/styles/desoto/">DeSoto<span aria-hidden="true"></span></a>
<span>by Joey Imlay</span>
</span>
</li><li style="background-image: url('/style-img/drafter');">
<span>
<a href="https://stylestage.dev/styles/drafter/">Drafter<span aria-hidden="true"></span></a>
<span>by Claudine Ong</span>
</span>
</li><li style="background-image: url('/style-img/drawing-board');">
<span>
<a href="https://stylestage.dev/styles/drawing-board/">Drawing Board<span aria-hidden="true"></span></a>
<span>by Emma Grey</span>
</span>
</li><li style="background-image: url('/style-img/eighties-synthwave');">
<span>
<a href="https://stylestage.dev/styles/eighties-synthwave/">Eighties Synthwave<span aria-hidden="true"></span></a>
<span>by Kevin Powell</span>
</span>
</li><li style="background-image: url('/style-img/emphasis');">
<span>
<a href="https://stylestage.dev/styles/emphasis/">Emphasis<span aria-hidden="true"></span></a>
<span>by d-cs</span>
</span>
</li><li style="background-image: url('/style-img/final-frontier');">
<span>
<a href="https://stylestage.dev/styles/final-frontier/">Final Frontier<span aria-hidden="true"></span></a>
<span>by Danielle Mayabb</span>
</span>
</li><li style="background-image: url('/style-img/floral-vibes');">
<span>
<a href="https://stylestage.dev/styles/floral-vibes/">Floral vibes<span aria-hidden="true"></span></a>
<span>by Neelam Chavan</span>
</span>
</li><li style="background-image: url('/style-img/fresh');">
<span>
<a href="https://stylestage.dev/styles/fresh/">Fresh<span aria-hidden="true"></span></a>
<span>by Thomas Champion</span>
</span>
</li><li style="background-image: url('/style-img/gallery');">
<span>
<a href="https://stylestage.dev/styles/gallery/">Gallery<span aria-hidden="true"></span></a>
<span>by Olivia Ng</span>
</span>
</li><li style="background-image: url('/style-img/geocities');">
<span>
<a href="https://stylestage.dev/styles/geocities/">Geocities<span aria-hidden="true"></span></a>
<span>by whitep4nth3r</span>
</span>
</li><li style="background-image: url('/style-img/hackytoberfest');">
<span>
<a href="https://stylestage.dev/styles/hackytoberfest/">Hackytoberfest<span aria-hidden="true"></span></a>
<span>by Jordana Harrison</span>
</span>
</li><li style="background-image: url('/style-img/happy-halloween');">
<span>
<a href="https://stylestage.dev/styles/happy-halloween/">Happy Halloween<span aria-hidden="true"></span></a>
<span>by Fredorixo</span>
</span>
</li><li style="background-image: url('/style-img/headquarters');">
<span>
<a href="https://stylestage.dev/styles/headquarters/">Headquarters<span aria-hidden="true"></span></a>
<span>by Stephanie Eckles</span>
</span>
</li><li style="background-image: url('/style-img/i-got-the-blues');">
<span>
<a href="https://stylestage.dev/styles/i-got-the-blues/">I Got The Blues<span aria-hidden="true"></span></a>
<span>by Jessica Nagar</span>
</span>
</li><li style="background-image: url('/style-img/istage');">
<span>
<a href="https://stylestage.dev/styles/istage/">iStage<span aria-hidden="true"></span></a>
<span>by Bahe Yaich</span>
</span>
</li><li style="background-image: url('/style-img/jet-set');">
<span>
<a href="https://stylestage.dev/styles/jet-set/">Jet Set<span aria-hidden="true"></span></a>
<span>by Cory Birdsong</span>
</span>
</li><li style="background-image: url('/style-img/liquid-style');">
<span>
<a href="https://stylestage.dev/styles/liquid-style/">Liquid Style<span aria-hidden="true"></span></a>
<span>by Toni Rome</span>
</span>
</li><li style="background-image: url('/style-img/web-2.0-lobster-party');">
<span>
<a href="https://stylestage.dev/styles/web-2.0-lobster-party/">Web 2.0 Lobster Party<span aria-hidden="true"></span></a>
<span>by Andy Bell</span>
</span>
</li><li style="background-image: url('/style-img/manual');">
<span>
<a href="https://stylestage.dev/styles/manual/">Manual<span aria-hidden="true"></span></a>
<span>by Lynn Fisher</span>
</span>
</li><li style="background-image: url('/style-img/mburucuya');">
<span>
<a href="https://stylestage.dev/styles/mburucuya/">Mburucuya<span aria-hidden="true"></span></a>
<span>by Lide O.</span>
</span>
</li><li style="background-image: url('/style-img/moccasin-stage');">
<span>
<a href="https://stylestage.dev/styles/moccasin-stage/">Moccasin Stage<span aria-hidden="true"></span></a>
<span>by Gabriel Paixao</span>
</span>
</li><li style="background-image: url('/style-img/modern-stars');">
<span>
<a href="https://stylestage.dev/styles/modern-stars/">Modern stars<span aria-hidden="true"></span></a>
<span>by Alba Maldonado</span>
</span>
</li><li style="background-image: url('/style-img/monominimal');">
<span>
<a href="https://stylestage.dev/styles/monominimal/">MonoMinimal<span aria-hidden="true"></span></a>
<span>by Amit Sheen</span>
</span>
</li><li style="background-image: url('/style-img/neomorphism-design');">
<span>
<a href="https://stylestage.dev/styles/neomorphism-design/">Neomorphism Design<span aria-hidden="true"></span></a>
<span>by Manoranjan D</span>
</span>
</li><li style="background-image: url('/style-img/neon-beetles');">
<span>
<a href="https://stylestage.dev/styles/neon-beetles/">Neon Beetles<span aria-hidden="true"></span></a>
<span>by Barbara Aliverti</span>
</span>
</li><li style="background-image: url('/style-img/neon');">
<span>
<a href="https://stylestage.dev/styles/neon/">Neon<span aria-hidden="true"></span></a>
<span>by Pablo Jimenez</span>
</span>
</li><li style="background-image: url('/style-img/nightshade');">
<span>
<a href="https://stylestage.dev/styles/nightshade/">Nightshade<span aria-hidden="true"></span></a>
<span>by Peter Byfield</span>
</span>
</li><li style="background-image: url('/style-img/pastels-and-columns');">
<span>
<a href="https://stylestage.dev/styles/pastels-and-columns/">Pastels & Columns<span aria-hidden="true"></span></a>
<span>by Carol McKay</span>
</span>
</li><li style="background-image: url('/style-img/pilgrim');">
<span>
<a href="https://stylestage.dev/styles/pilgrim/">Pilgrim<span aria-hidden="true"></span></a>
<span>by Gonçalo Morais</span>
</span>
</li><li style="background-image: url('/style-img/pink-lime');">
<span>
<a href="https://stylestage.dev/styles/pink-lime/">Pink Lime<span aria-hidden="true"></span></a>
<span>by Michelle Barker</span>
</span>
</li><li style="background-image: url('/style-img/pink-outside-the-box');">
<span>
<a href="https://stylestage.dev/styles/pink-outside-the-box/">Pink Outside The Box<span aria-hidden="true"></span></a>
<span>by GabbyKC</span>
</span>
</li><li style="background-image: url('/style-img/plainnsimple');">
<span>
<a href="https://stylestage.dev/styles/plainnsimple/">Plain'n'simple<span aria-hidden="true"></span></a>
<span>by Silvestar Bistrović</span>
</span>
</li><li style="background-image: url('/style-img/plants-on-pink');">
<span>
<a href="https://stylestage.dev/styles/plants-on-pink/">Plants on Pink<span aria-hidden="true"></span></a>
<span>by Nicole Ortiz</span>
</span>
</li><li style="background-image: url('/style-img/propaganda');">
<span>
<a href="https://stylestage.dev/styles/propaganda/">Propaganda<span aria-hidden="true"></span></a>
<span>by Maryam Hanafiah</span>
</span>
</li><li style="background-image: url('/style-img/purpleland');">
<span>
<a href="https://stylestage.dev/styles/purpleland/">Purpleland<span aria-hidden="true"></span></a>
<span>by Dawntraoz</span>
</span>
</li><li style="background-image: url('/style-img/purplify-and-pastel');">
<span>
<a href="https://stylestage.dev/styles/purplify-and-pastel/">Purplify & Pastel<span aria-hidden="true"></span></a>
<span>by Dominic Duffin</span>
</span>
</li><li style="background-image: url('/style-img/queer-modes');">
<span>
<a href="https://stylestage.dev/styles/queer-modes/">Queer Modes<span aria-hidden="true"></span></a>
<span>by Miriam Suzanne</span>
</span>
</li><li style="background-image: url('/style-img/rainbow');">
<span>
<a href="https://stylestage.dev/styles/rainbow/">Rainbow<span aria-hidden="true"></span></a>
<span>by Nic Mayer</span>
</span>
</li><li style="background-image: url('/style-img/red-sand');">
<span>
<a href="https://stylestage.dev/styles/red-sand/">Red Sand<span aria-hidden="true"></span></a>
<span>by UsrnGamesInc</span>
</span>
</li><li style="background-image: url('/style-img/retro-cyberpunk');">
<span>
<a href="https://stylestage.dev/styles/retro-cyberpunk/">Retro Cyberpunk<span aria-hidden="true"></span></a>
<span>by Inès K.</span>
</span>
</li><li style="background-image: url('/style-img/retro-modern');">
<span>
<a href="https://stylestage.dev/styles/retro-modern/">Retro Modern<span aria-hidden="true"></span></a>
<span>by Mike Aparicio</span>
</span>
</li><li style="background-image: url('/style-img/retro');">
<span>
<a href="https://stylestage.dev/styles/retro/">Retro<span aria-hidden="true"></span></a>
<span>by Rachel B</span>
</span>
</li><li style="background-image: url('/style-img/retroish');">
<span>
<a href="https://stylestage.dev/styles/retroish/">Retroish<span aria-hidden="true"></span></a>
<span>by Jean Louise Tiston</span>
</span>
</li><li style="background-image: url('/style-img/russian-inspiration');">
<span>
<a href="https://stylestage.dev/styles/russian-inspiration/">Russian Inspiration<span aria-hidden="true"></span></a>
<span>by CandiceCz</span>
</span>
</li><li style="background-image: url('/style-img/severe-with-rainbow');">
<span>
<a href="https://stylestage.dev/styles/severe-with-rainbow/">Severe with Rainbow<span aria-hidden="true"></span></a>
<span>by Lizard Morrow</span>
</span>
</li><li style="background-image: url('/style-img/shadows');">
<span>
<a href="https://stylestage.dev/styles/shadows/">Shadows<span aria-hidden="true"></span></a>
<span>by Nadia Laasri</span>
</span>
</li><li style="background-image: url('/style-img/shimmering-stars');">
<span>
<a href="https://stylestage.dev/styles/shimmering-stars/">Shimmering Stars<span aria-hidden="true"></span></a>
<span>by Paola Ayala Zelaya</span>
</span>
</li><li style="background-image: url('/style-img/simple-blue-roboto');">
<span>
<a href="https://stylestage.dev/styles/simple-blue-roboto/">Simple Blue Roboto<span aria-hidden="true"></span></a>
<span>by JCarlosR</span>
</span>
</li><li style="background-image: url('/style-img/skewten');">
<span>
<a href="https://stylestage.dev/styles/skewten/">Skewten<span aria-hidden="true"></span></a>
<span>by Donnie D'Amato</span>
</span>
</li><li style="background-image: url('/style-img/slide-stage');">
<span>
<a href="https://stylestage.dev/styles/slide-stage/">Slide Stage<span aria-hidden="true"></span></a>
<span>by Thomas Tuvignon</span>
</span>
</li><li style="background-image: url('/style-img/soff');">
<span>
<a href="https://stylestage.dev/styles/soff/">Soff<span aria-hidden="true"></span></a>
<span>by Beatrice Bock</span>
</span>
</li><li style="background-image: url('/style-img/solidstate');">
<span>
<a href="https://stylestage.dev/styles/solidstate/">SolidState<span aria-hidden="true"></span></a>
<span>by Maheshkumar</span>
</span>
</li><li style="background-image: url('/style-img/spectrum');">
<span>
<a href="https://stylestage.dev/styles/spectrum/">Spectrum<span aria-hidden="true"></span></a>
<span>by Robert Manders</span>
</span>
</li><li style="background-image: url('/style-img/stageos');">
<span>
<a href="https://stylestage.dev/styles/stageos/">StageOS<span aria-hidden="true"></span></a>
<span>by Håvard Brynjulfsen</span>
</span>
</li><li style="background-image: url('/style-img/stageflix');">
<span>
<a href="https://stylestage.dev/styles/stageflix/">Stageflix<span aria-hidden="true"></span></a>
<span>by Suckcoder</span>
</span>
</li><li style="background-image: url('/style-img/the-styles-must-go-on');">
<span>
<a href="https://stylestage.dev/styles/the-styles-must-go-on/">The Styles Must Go On!<span aria-hidden="true"></span></a>
<span>by Joe Lamyman</span>
</span>
</li><li style="background-image: url('/style-img/sweet-n-sp00ky');">
<span>
<a href="https://stylestage.dev/styles/sweet-n-sp00ky/">Sweet N Sp00ky<span aria-hidden="true"></span></a>
<span>by Aiden Schrock</span>
</span>
</li><li style="background-image: url('/style-img/sysfonts');">
<span>
<a href="https://stylestage.dev/styles/sysfonts/">Sysfonts<span aria-hidden="true"></span></a>
<span>by Halvor William Sanden</span>
</span>
</li><li style="background-image: url('/style-img/trafalgar');">
<span>
<a href="https://stylestage.dev/styles/trafalgar/">Trafalgar<span aria-hidden="true"></span></a>
<span>by Mike Andrewartha</span>
</span>
</li><li style="background-image: url('/style-img/transparency');">
<span>
<a href="https://stylestage.dev/styles/transparency/">Transparency<span aria-hidden="true"></span></a>
<span>by Jens Oliver Meiert</span>
</span>
</li><li style="background-image: url('/style-img/vaporwave');">
<span>
<a href="https://stylestage.dev/styles/vaporwave/">Vaporwave<span aria-hidden="true"></span></a>
<span>by Shannon Crabill</span>
</span>
</li><li style="background-image: url('/style-img/vibrant');">
<span>
<a href="https://stylestage.dev/styles/vibrant/">Vibrant<span aria-hidden="true"></span></a>
<span>by Lakshmikant.K</span>
</span>
</li><li style="background-image: url('/style-img/we-love-teal');">
<span>
<a href="https://stylestage.dev/styles/we-love-teal/">We Love Teal<span aria-hidden="true"></span></a>
<span>by Olivia Johnson</span>
</span>
</li><li style="background-image: url('/style-img/ye-olde-book');">
<span>
<a href="https://stylestage.dev/styles/ye-olde-book/">Ye Olde Book<span aria-hidden="true"></span></a>
<span>by Max Spuling</span>
</span>
</li><li style="background-image: url('/style-img/yellowed');">
<span>
<a href="https://stylestage.dev/styles/yellowed/">Yellowed<span aria-hidden="true"></span></a>
<span>by Sowmya Seshadri</span>
</span>
</li></ul>
Guidelines2023-08-19T04:59:11Zhttps://stylestage.dev/guidelines/<p><strong><a href="https://stylestage.dev/subscribe/">Subscribe to updates</a></strong> to recieve notice of new features, like dark mode!</p>
<p>The HTML for this page was created to be semantic, accessible, and free of nearly all
other opinions. While typically extra divs are to be avoided, each sectioning element
also includes a <code>.container</code> div as the first child for use as a styling aid since you do
not have access to alter the base HTML. IDs are included where needed for nav anchors or accessibility, and a small number of additional classes are provided for key elements without IDs.</p>
<p><strong>As a contributor, you agree to abide by the following guidelines and restrictions:</strong></p>
<ul>
<li>Branding is prohibited with the exception of <a href="https://stylestage.dev/support/">Monthly and Weekly sponsors</a>.</li>
<li>The HTML is not available to modify, except for attribution values that will be added from your submission metadata.</li>
<li>You may use any build setup you prefer to create your stylesheet, but the final submission should be the compiled, unminified CSS.</li>
<li>Stylesheets will become hosted locally to the project as well as be run through autoprefixer to ensure optimal performance.</li>
<li>Submissions will have licensing and attribution added upon the processing of the provided metadata.</li>
<li>Any changes made past initial submission will be revealed in the version history and reviewed to ensure guidelines are still met. Removal of the public stylesheet will result in removal from Style Stage.</li>
<li>You retain copyright over original graphics, and your stylesheet will receive the <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA license</a>.</li>
<li>All asset links, including fonts, must be absolute to external resources. Broken asset links will lead to removal.</li>
<li>Page load time should not exceed 3 seconds. <em>Note: This site is built with Eleventy and hosted on Netlify, so your local load time will likely be very close to production load time.</em></li>
<li>There should be no contrast errors dedicated when validated against tools like WAVE or
aXe. Include any notes about false errors in your pull request.</li>
<li>All graphic assets should respect copyright laws and be licensed appropriately.</li>
<li>Designs should be responsive and usable across the most widely supported browsers (check
<a href="https://caniuse.com/">caniuse data</a> as needed)</li>
<li>When cutting-edge properties are used, appropriate fallbacks should be provided if there
is a significant impact on the user experience, particularly as it relates to
accessibility.</li>
<li>Animations should be removed via <code>prefers-reduced-motion</code>. The reset included with the source CSS demonstrates how to do this.</li>
<li>No content may be permanently hidden, and hidden items must come with an accessible viewing technique.</li>
<li>Submissions will be rejected for using obscene, excessively violent, or otherwise
distasteful imagery, violating the above guidelines, or other reasons at the discretion
of the maintainer. You may be asked to make revisions for minor violations.</li>
<li>Submissions may be removed if future changes are made that violate the guidelines, or if
notice is received of copyright violations.</li>
</ul>
<h2 id="faqs" tabindex="-1">FAQs</h2>
<h3 id="what-pages-will-be-restyled" tabindex="-1">What pages will be restyled?</h3>
<p>A dedicated page will be generated for your stylesheet that will restyle a copy of the home page only. Review the <a href="https://stylestage.dev/#files">files</a> section to get the up-to-date source content.</p>
<h3 id="how-do-i-create-a-public-stylesheet-url" tabindex="-1">How do I create a public stylesheet URL?</h3>
<p>You can host on your own domain, but if you don't have one, the following will also work:</p>
<ul>
<li><strong>Github</strong>: You'll need to submit the link to the "raw" version instead of the Github page for it to work properly. This can be a gist or a file within a repo.</li>
<li><strong>CodePen</strong>: If you <a href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291">fork the Style Stage CodePen</a> you can add <code>.css</code> to your pen URL and use that. Don't worry about the 404 - Style Stage will be able to extract the styles anyway!</li>
</ul>
<h3 id="how-do-i-create-a-pull-request-pr" tabindex="-1">How do I create a pull request (PR)?</h3>
<p>Currently, you must have a <a href="https://github.com/">GitHub</a> account to participate.</p>
<ol>
<li>Visit the <a href="https://github.com/5t3ph/stylestage">stylestage repo</a></li>
<li>Select "Fork" (top right on a desktop view)</li>
<li>Add your information as noted in <a href="https://github.com/5t3ph/stylestage#contribute-a-stylesheet">Contribute a Stylesheet</a>. You can navigate to the file and edit it via the web interface or clone it to make changes locally.</li>
<li>Once edits are made and committed to your fork, visit the <a href="https://github.com/5t3ph/stylestage/compare">compare page</a> and ensure it lists "base: main" and "compare: [your fork]" and then select "Create pull request"</li>
<li>We will receive notice of the PR and review. A preview link will be created on Netlify as part of the PR. We may ask you to make some changes to meet the guidelines, and then if all goes well it will be published!</li>
</ol>
<h3 id="what-about-dark-mode" tabindex="-1">What about dark mode?</h3>
<p>A near-future update will allow you to optionally display a toggle to flip to dark mode. <a href="https://stylestage.dev/subscribe/">Subscribe to updates</a> to make sure you get a notification and update your stylesheets!</p>
Resources2023-08-19T04:59:11Zhttps://stylestage.dev/resources/<p>Creating your Style Stage stylesheet will challenge you to explore techniques like flexbox and grid to arrange the page, and pseudo elements to add extra content and flair. Take the opportunity to design something a little unusual! So far, gradients and transform: skew() are popular with contributors ✨</p>
<p>Play is a powerful teacher! How far can you push the boundaries while staying accessible and performant? These are skills worth practicing that will equip you to choose the right tool for the job in future projects. Even if the right tool is a framework, you will have a deeper understanding of how styles you apply are working and improve your ability to customize them.</p>
<p>Trust me - it feels good to say: "I can do that in CSS!"</p>
<h2 id="stylesheet-creation-tips" tabindex="-1">Stylesheet Creation Tips</h2>
<blockquote>
<p><strong>Enjoy using Sass?</strong> - Me too! You can start from the <a href="https://github.com/5t3ph/stylestage-sass">Sass template</a> that includes the original Sass from the Main Stage theme. The template also features BrowserSync to hot-reload updates as you build your submission.</p>
</blockquote>
<ul>
<li><strong>Create inclusive, accessible styles</strong> - At minimum, Style Stage guidelines require meeting accessible contrast as well as removing animations via <code>prefers-reduced-motion</code> (demonstrated in the source CSS). Both of these things help create a more inclusive web by ensuring users can enjoy interactive experiences with less barriers. Additionally, ensure you retain accessible <code>:focus</code> states for interactive elements. To test, tab over your layout and if you loose track of where you've tabbed, fix the <code>:focus</code>! If you're newer to web accessibility, <a href="https://dev.to/5t3ph/introduction-to-web-accessibility-5cmp">my intro article</a> covers contrast, keyboard interaction, and more including additional resource links.</li>
<li><strong>Accessible contrast required across states</strong> - A common mistake for links styled as buttons is to lose contrast for <code>:focus</code> or <code>:hover</code> states, or not have enough contrast between the "button" background and the surface behind the button. Good news! I've created a web app to help you with this contrast, check it out at <a href="https://buttonbuddy.dev/">ButtonBuddy.dev</a>.</li>
<li><strong>Don't forget the skip link!</strong> - The <code>.skip-link</code> is the first item in the HTML source's body. On the Main Stage, it appears when in <code>:focus</code>, which is expected to be the first "tab" event into the browser window. This is useful for users of assitive technology "skip" the navigation and header fluff to get to the main content. Be sure to give it a style! You can certainly choose to have it always visible.</li>
<li><strong>Use a style reset</strong> - The source styles include a modified version of Andy Bell's <a href="https://github.com/hankchizljaw/modern-css-reset">Modern CSS Reset</a></li>
<li><strong>Inspect!</strong> - All modern browsers have an "Inspector" built in which allows you to choose an element on the page and quickly learn more about its HTML structure and related styles. Spend a bit of time learning tricks about the Inspector included in your favorite browser!</li>
<li><strong>Become one with the cascade</strong> - The "C" in CSS is going to be your greatest enabler on this project. With limited availability of classes and IDs, you will have much greater success by working <em>with</em> inheritance. Need a refresher? <a href="https://dev.to/5t3ph/intro-to-the-css-cascade-the-c-in-css-1kh0">Check out my episode about the cascade</a> from my web development course for beginners.</li>
<li><strong>Learn about CSS selectors</strong> - Because the Style Stage HTML offers very minimal classes and IDs, you'll want to get familiar with the wide range of ways you can select elements in CSS. I really love this interactive game that covers <em>32</em> selector combinations: <a href="https://flukeout.github.io/">CSS Diner</a>. I've also written <a href="https://moderncss.dev/guide-to-advanced-css-selectors-part-one/">an in-depth guide to advanced CSS selectors</a> including examples.</li>
<li><strong>Cozy up to pseudo elements</strong> - You may not be allowed to alter the HTML, but that doesn't mean you can't add extra elements! <a href="https://css-tricks.com/pseudo-element-roundup/">Pseudo elements</a> allow you to prepend and append extra content, greatly expanding the styling opportunities. In theory you could add two extra elements to every element in the page and... well I'm not going to do the math, but it's a lot of extra elements! These can hold things like extra backgrounds, SVGs, and even text (it's how the "coach marks" are applied on the Main Stage). Check out my guide to <a href="https://moderncss.dev/guide-to-advanced-css-selectors-part-two/">learn more about using pseudo elements</a>.</li>
<li><strong>Try out CSS custom properties</strong> - The source CSS makes use of <a href="https://12daysofweb.dev/2021/css-custom-properties/">CSS custom properties</a> (aka "variables"). Learn from experts like <a href="https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/">Miriam Suzanne</a> (who is a Style Stage contributor!) and <a href="https://www.sarasoueidan.com/blog/style-settings-with-css-variables/">Sara Soueidan</a>.</li>
<li><strong>Test the most modern CSS</strong> - What interesting techniques can you create with <code>:focus-within</code>? Have you tried out grid yet? What about creating an enhanced experience with cutting-edge features by testing for them with <code>@supports</code>?</li>
<li><strong>Review all stylesheets</strong> - Don't just look - scroll! Hover! Resize! Most importantly - inspect!</li>
</ul>
<h2 id="level-up-your-skills-on-moderncssdev" tabindex="-1">Level-Up Your Skills on ModernCSS.dev</h2>
<p>Review my in-depth tutorials to upgrade your CSS toolbox!</p>
<p><a class="link" href="https://moderncss.dev/">Visit ModernCSS.dev</a></p>
Subscribe to Updates2023-08-19T04:59:11Zhttps://stylestage.dev/subscribe/<p>A weekly(ish) newsletter with Style Stage updates and CSS tips.</p>
<h2 id="why-subscribe" tabindex="-1">Why Subscribe?</h2>
<p><strong>Fans</strong>:
Should subscribe to be alerted of newly added styles.</p>
<p><strong>Contributors</strong>:
Should subscribe to be alerted to any changes or new features so they can update their styles or metadata.</p>
Support Style Stage2023-08-19T04:59:11Zhttps://stylestage.dev/support/<p>Hi! I'm Stephanie Eckles, the creator of <strong>Style Stage</strong> and author of the related site, <a href="https://moderncss.dev/">ModernCSS.dev</a>.</p>
<p>To show your support to me as an individual creator, please consider <a href="https://www.buymeacoffee.com/moderncss">buying me a coffee</a>.</p>
<h2 id="sponsor-options" tabindex="-1">Sponsor Options</h2>
<p>The current concept involves two options. Reach out <a href="https://twitter.com/5t3ph">in a Twitter message</a> to discuss further. Style Stage reserves the right to reject offers to sponsor.</p>
<p>For both options, you may create a branded Style Stage stylesheet theme that will be linked from a "tweet length" banner. The branded Style Stage page will use a different schema for the "profile" section with your ad copy, optional logo, and link of your choice. Sponsors will also be listed with logos on the <a href="https://stylestage.dev/styles/">Styles Directory</a>. The branded Style Stage page will be removed at the end of the paid period.</p>
<p>Sponsorship periods start on Mondays at 12 AM US Central.</p>
<ol>
<li>
<p><strong>Monthly Sponsor: $400</strong> - Banner placement at the top of all pages.</p>
</li>
<li>
<p><strong>Weekly Sponsor: $100</strong> - Banner placement below the footer on the home page.</p>
</li>
</ol>
<p>Style Stage is not using event tracking analytics, but can provide site and sponsored page total views for the paid period. Current unique visitors average about 15K/month.</p>
<h3 id="how-will-sponsorship-money-be-used" tabindex="-1">How Will Sponsorship Money Be Used?</h3>
<ul>
<li>50% operating costs</li>
<li>50% donated back to various community projects</li>
</ul>