The Bevel Spell – Uncovering Yet Another Wix Effect

March 23rd 2010 | Designing with Wix

Creating a website with Wix website builder may introduce you to new concepts that are quite well known in the web design industry but mean very little to your everyday life. “Bevel” is perhaps a good example of that. You may have already ran into “Bevel” under ‘Effects’, but we would now like to make an official introduction. So what exactly does “Bevel” do?

“Bevel” creates the illusion of 3D. If you apply “Bevel” on a certain item, it will suddenly create a distance between the background and your item while emphasizing the layers. In many graphic design software, “Bevel” is created by a combination of effects and adjustments, but on the Wix editor you just need a simple click to apply “Bevel” to your work.

“Bevel” is a gentle effect. There’s a thin line between using and abusing it. One of the things that professional web designers often rant about is careless use of “Bevel” nowadays. That’s why Wix provides you with the option to fine-tune your “Bevel” in the micro level, and here’s how it’s done:

  1. Add some kind of item to your website and apply “Bevel” to it. “Bevel” works best with simple items, on which delicate changes are more noticeable, like shapes, icons or texts.

    The Wix Editor Applying Bevel Effect

  2. You can now change the color of the shadow and the highlight to match the color of the original item and the color of the background you’re using.The Wix Editor Changing colors
  3. The default angle of the “Bevel” effect is 45 degrees. Play with it if you wish, but don’t go over the top.
  4. Now you can play with the distance, the strength and the blur scales. Notice that the adjustments you make with these three categories basically change the balance between the original item color, the shadow color and the highlight color. And that’s the secret of “Bevel”.
The Wix Editor: Adjusting the Bevel Effect

Now let’s check out what “Bevel” actually looks like with these before and after screen shots. It’s a “Bevel” makeover!

Circle with and without Bevel
Icon with and without Bevel
Text with and without bevel



1 comment

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>