Aside from some built in transitions and CSS variables, this is a blank template to build your own menu content. To showcase what you can do with it, I've also made a customized preview.
This is made possible with :focus-within, which lets us select a parent element based on the (focused) state of its children, similar to :has(). Using :has(:focus) could have accomplished something like this, but this selector is specialized for this purpose.
Elevate your blog's identity with a theme that speaks in silences and sharp silhouettes. NOIR is a magazine-inspired "About Me" static page designed for the modern curator. Whether you’re archiving your latest K-pop stanning era or building a professional editorial portfolio, this layout provides the structure your story deserves.
[ LIVE PREVIEW ] · [ GET THE CODE ]
🖋 THE VIBE
Sleek + Classy: A strictly monochromatic palette.
Editorial Hierarchy: Magazine-style grids with serif + sans-serif font pairing.
Fully Responsive: Optimized for desktop, tablet, and mobile browsing.
Light Animations: Subtle CSS fade-ins and avatar interactions.
Layout Features: 6 navigation links, "This or That" sidebar, custom tag grid, and a dedicated contact section.
📜 RULES OF USE
Do not remove the credit to @whereinmnl.
Personal use only. You may edit the colors and text, but do not redistribute as your own.
Like or Reblog if you’re using or saving! It helps more than you know.
🖋 CREATOR'S NOTE
This is officially my first theme release! Honestly, this was quite a challenge to build. Navigating Tumblr’s "no JavaScript" rule for pages forced me to get creative with pure CSS to ensure the layout stayed responsive and the animations felt fluid. It took a lot of trial and error to get that "magazine" look just right without relying on scripts, but I’m so happy with the final result. I hope you love using it as much as I loved (and struggled!) building it.
📦 HOW TO INSTALL
Go to your Blog Settings: Click the palette icon (Customize) on your Tumblr dashboard.
Add a Page: Scroll to the bottom of the left sidebar and click '+ Add a Page'.
Setup the URL: Give your page a name (e.g., about or profile).
Enable Custom Layout: Toggle the switch that says 'Use Custom Layout'.
Clear the Code: Delete everything currently in the code editor window.
Paste & Save: Copy the NOIR theme code, paste it into the editor, and hit 'Save'.
Final Step: Make sure your new page is set to "Show a link to this page" if you want it visible on your main blog navigation!
💡 QUICK CUSTOMIZATION TIPS
Change the Avatar: Look for the <img> tag near the top of the code and replace the URL inside src="..." with your own image link.
Update the Links: Search for href="#" and replace the # with your actual social media or internal blog links.
Colors: If you want to change the "Noir" look, look for the :root section at the top of the CSS and swap the HEX codes for --bg or --accent.
DISCLAIMER: While this code is my own original work, I acknowledge that minimalism often shares similar design elements. If you feel this layout closely resembles your own work or if you have any concerns regarding the design, please feel free to message me privately so we can discuss it. I value the integrity of the creator community.
There are countless things I'd love to be able to do with CSS only but here are a few small but—in my option—impactful things I'd like to see fully supported in 2026.
Masonry Layout
Currently an experimental feature in Safari only, creating a masonry layout using CSS grid only would be fantastic. Just imagine how much faster websites could get by using CSS only for this feat rather than relying on JavaScript or even the jQuery library. Furthermore, some of the current masonry libraries require you to buy licenses, especially for commercial uses—in this way, adding masonry to CSS would democratize the use of this layout.
Masonry on MDN | W3C Editor's Draft on Grid Masonry
Backdrop Filters
These filters affecting the look of an area behind the targeted element became baseline available in 2024, so not too long ago. Currently, ten different filters are available. One of the most utilized might be the blur filter, allowing us to create frosted glass effects on elements. With Apple's newly introduced Liquid Glass (though, let's be honest, it's just a trendier version of good old glassmorphism), which can already be partly recreated in Figma, the addition of some more filters would certainly help developers. Imagine filters targeting the refraction, depth, dispersion or noise behind an element—suddenly, adding cool effects to elements would not require nesting elements or using ::before and ::after pseudo-elements.
Backdrop Filters on MDN | W3C Editor's Draft on Backdrop Filters
Gradient Borders
As far as I'm concerned—and I did the research—it's still not possible to simply type "border: 4px solid linear-gradient(red, blue); border-radius: 16px;" into CSS and just get a rounded gradient border. While you might correctly say that gradient borders are possible using the border-image property, it does have the major drawback of being incompatible with the border-radius property. If this incompatibility would be fixed in 2026 or the property revamped, it would simplify web development further.
Pseudo-Elements and -Classes
We already have some lovely selectors and pseudo-elements such as ::first-letter, ::before, :has(), :is() or ::after allow us to create enhanced designs and even apply some logic to them. Personally, I would love to see a further increase in logic to reduce the dependency on JavaScript. An example would be targeting each ::first-letter in a word, as the pseudo-element is currently limited to a block container only, which would require wrapping each word individually to get the effect—a hassle especially for dynamic content, such as blogs.
SVGs
Just give us more support for SVGs, especially SVG text. There are some truly amazing features out there that either are still in experimental stages or require complicated syntax and deeper understanding of how SVGs are made. Not very accessible, especially for beginners.
TL;DR
I want more features to be native to CSS, and made easier. This moves us away from dependencies on external libraries, reduces load times and increases security. Plus it opens doors for more people getting into website design and development, allowing us to fight against the dead internet, enshittification and capitalism by creating our own sites, gaining independence from corporations.
Purchase $5.00 Simple and unique Creative style for pricing tables. Styles to choose are many variation, with possibility of choosing 14 different colors for each of the style. No images needed, pure css and html files. Less files included, Fully responsive and adapted for all grid systems. Bootstrap Column Feature Responsive Clean Design Design Variation Background Color Gradient Background LESS…
