CSS Basics

CSS (Cascading Style Sheets) is a powerful tool that allows you to add advanced visual effects and styling to your WIX Studio projects. In this chapter, we’ll cover some essential CSS concepts and techniques, such as creating blurry glassy containers, gradients, and more, through custom CSS classes. These effects can take your designs to the next level and add a touch of sophistication.

---

Custom CSS Classes in WIX Studio

Before diving into specific effects, it’s important to understand how custom CSS works in WIX Studio:

• What It Is: A way to apply advanced styling by writing your own CSS code and linking it to elements on your website.

• How to Use It:

  1. Assign a CSS class name to an element in WIX Studio.

  2. Write the corresponding CSS code in the integrated Velo editor or an external stylesheet.

Pro Tip: Use descriptive class names like .blurry-glass or .gradient-button to keep your code organized.

---

Blurry Glassy Containers

What It Is: A frosted glass effect that creates a semi-transparent, blurred background. It’s a trendy, modern design choice often used for overlays or content cards.

CSS Code Example

.blurry-glass {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

How to Use It

1. Assign the class blurry-glass to a container in WIX Studio.

2. Customize the blur level and background color to fit your design.

---

Gradients

What It Is: Gradients blend two or more colors seamlessly and can be used for backgrounds, buttons, or text.

CSS Code Example

Linear Gradient:

.gradient-background {
  background: linear-gradient(45deg, #ff6b6b, #f8e71c);
}

Radial Gradient:

.gradient-circle {
  background: radial-gradient(circle, #4facfe, #00f2fe);
}

How to Use It

1. Assign the class gradient-background or gradient-circle to your desired element.

2. Experiment with colors and gradient directions for a unique look.

Pro Tip: Use gradients sparingly to avoid overwhelming the design. Subtle gradients often have the most professional appeal.

---

Advanced Styling Techniques

Shadows and Depth

Add depth to your elements with box shadows.

.card-shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

Hover Effects

Make elements interactive with hover effects.

.button-hover:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

Text Effects

Create eye-catching typography with text shadows and gradients.

.text-gradient {
  background: linear-gradient(90deg, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

---

Learn by Watching: CSS Basics in Action

To help you master these techniques, we’ve included two videos that demonstrates how to create these effects step by step:

CSS in Wix Studio | Wix FixYouTube

---

Why CSS Basics Matter

CSS gives you the flexibility to push your designs beyond WIX Studio’s default capabilities. By mastering these foundational techniques, you’ll be able to:

• Add custom, unique styling to your projects.

• Create effects that make your designs stand out.

• Customize your site to match any client’s needs.

---

Your Next Step

Start by experimenting with blurry containers, gradients, and hover effects on a blank WIX Studio page. Watch the videos to deepen your understanding, and practice writing custom CSS to bring your designs to life. Once you’re comfortable with these basics, you’ll be ready to tackle even more advanced styling challenges!