Are you ready to gain some superpowers to use on your Wix Studio websites?
The superpower I'm talking about is the ability to add custom CSS.
In this article, I will show you three ways to use custom CSS to make your sites stunning and save time.
Are you ready to unlock your superpowers with three CSS tips?
Let's dive in!
CC Superpower #1
The first superpower that can potentially save time is CSS variables.
If you come from a coding background, you have heard of variables before.
A variable allows you to save information to a name that can be referenced in your code to get the value assigned to it.
You can name a variable anything you want, but I think you should name it in a way that makes it easy to tell what it's doing.
One of the most powerful features of CSS variables is the ability to change a single value and have it change across all affected elements.
For example, if you have several buttons on your website and need to adjust the border-radius, you can modify the variable, and all buttons will update.
This will save you a lot of time when you've got a lot of buttons to adjust.
The code snippet below shows you how to use a CSS variable.
You can learn more about CSS variables in the MDN documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[:root { --border-raduis: 8px;}.button { border-raduis: var(--border-raduis)}]
CC Superpower #2
The second superpower is gradients.
Currently, you can only apply gradients to sections and buttons.
But by using CSS, you can apply them to containers, and you can also animate them.
One of the things I love about using CSS for my gradients is that it feels like I've unlocked a cheat code.
Instead of adjusting everything manually, you can use a CSS generator.
These generators allow you to quickly create complex CSS gradients that not only look beautiful but can make patterns as well.
Check out https://css-pattern.com for some great CSS pattern examples.
CC Superpower #3
The last CSS superpower I'm going to talk about is box shadow.
By creating your shadows using CSS, you can create more realistic-looking shadows by layering the shadows on top of each other. You also save time by using shadow generators.
Using this with CSS variables, you can update all the shadows on your page with ease.
The shadow generator that I like to use is
There are multiple ways to use CSS on Wix Studio websites.
The World Wide Web Consortium is constantly introducing new ways to style your site, but it often takes some time for web browsers to catch up with them.
One of the latest CSS features I'm looking forward to is scroll-driven animations
I hope this article was helpful.
You can find me on the Freelancer Fam Discord or on my YouTube channel, where I post video tutorials on Wix Studio.
Let's collaborate!
Check out my portfolio at https://www.createdbybailey.co.uk/ and let's build something amazing.