Izzy's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Custom color Frutiger Aero element backgrounds

I currently have a demo on my profile, but here's how it looks! You can change the background-color property to any color you'd like.

A screenshot of the SpaceHey nav bar, with a glossy finish coded by your's truly.

Just set the background-image to the following code of any element, namely the nav bars and profile name. Using the background property automatically overrides the color, so be sure to define the background color separately with the background-color property!

background-image: linear-gradient(#ffffff40, #ffffff2e 50%, #00000024 51%, #00000000 75%, #ffffff4d);

Update: I totally forgot to add that I used a separate gradient for the links nav bar, here's that code:

background-image: linear-gradient(#ffffff40, #ffffff30 50%, #ffffff00 51%, #ffffff00);


2 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

RustedMako

RustedMako's profile picture

Thats soo cool, i was overcomplicating myself using background images with pseudo elements between gradients, but you can use pure css to achieve this in a single container, thx :>


Report Comment



Mhm!, and don't forget you can set multiple background images, just separate it with commas. You can get so many different effects with linear and radial gradients, it's insane!

by Izzy; ; Report