Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Sass Color

Sass fade-out() Function

Posted in Sass Tutorial
Updated on Sep 30, 2024
By Mari Selvan
πŸ‘οΈ 12 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
Sass fade-out() Function

Photo Credit to CodeToFun

πŸ™‹ Introduction

The fade-out() function in Sass is used to decrease the opacity of a color, making it more transparent.

This function is particularly useful when you need to create overlays, hover effects, or simply adjust the visibility of elements without altering the original color.

πŸ’‘ Syntax

The syntax of the fade-out() function is simple and requires two arguments:

Syntax
Copied
Copy To Clipboard
fade-out(color, amount)

πŸ”’ Parameters

  • color: A color value (e.g., #ff0000, rgba(255, 0, 0, 1), hsl(0, 100%, 50%)).
  • amount: A percentage value that specifies how much to reduce the color's opacity (e.g., 20%).

↩️ Return Value

The function returns a color with its opacity reduced by the specified amount.

πŸ“ Example Usage

Let's explore some practical examples of how to use fade-out() in your Sass projects.

πŸ“œ Example 1: Basic Usage

example.scss
Copied
Copy To Clipboard
$original-color: rgba(255, 0, 0, 1); // Fully opaque red
$faded-color: fade-out($original-color, 50%);

div {
  background-color: $faded-color;
}

In this example, the red color with full opacity is faded out by 50%, resulting in a color with 50% opacity.

πŸ“œ Example 2: Using Hex Colors

example.scss
Copied
Copy To Clipboard
$original-color: #00ff00; // Green
$faded-color: fade-out($original-color, 30%);

.header {
  background-color: $faded-color;
}

Here, a green color specified in hex is faded out by 30%, making the color 70% opaque.

πŸ“œ Example 3: Creating Hover Effects

example.scss
Copied
Copy To Clipboard
$button-color: #0073e6; // Blue

button {
  background-color: $button-color;
  
  &:hover {
    background-color: fade-out($button-color, 20%);
  }
}

This example uses the fade-out() function to create a subtle hover effect by reducing the opacity of the button’s background color by 20% when hovered.

πŸ“œ Example 4: Using with RGB Colors

example.scss
Copied
Copy To Clipboard
$original-color: rgb(255, 165, 0); // Orange
$faded-color: fade-out($original-color, 40%);

.card {
  border-color: $faded-color;
}

In this case, an orange color is faded out by 40%, making it more transparent for use as a border color.

πŸŽ‰ Conclusion

The fade-out() function in Sass is an essential tool for adjusting the transparency of colors in your stylesheets. By reducing a color's opacity, you can create nuanced visual effects and enhance user interactions without changing the color itself. Whether you're designing overlays, hover effects, or transparent backgrounds, fade-out() offers a straightforward and powerful way to achieve the desired look.

Understanding how to use fade-out() effectively allows you to create more dynamic and engaging designs. Experiment with different colors and fade levels to discover the wide range of possibilities this function can offer in your projects.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy