Skip to ContentMini Arrow Down Icon
  • Codecademy Logo
  • Codecademy Logo
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
Back to CSS
  1. Docs/
  2. CSS/
  3. Filter Functions/
  4. brightness()

brightness()

robgmerrill's avatar'
robgmerrill
robgmerrill's avatar'
robgmerrill124 contributions
robgmerrill's avatar'
robgmerrill
Published Jul 12, 2021•Updated Sep 3, 2021
Contribute to DocsMini Arrow Right Icon

Defines the brightness or darkness of an element.

Syntax

filter: brightness(<value>);

where a required <value> can be one of the following:

  • Number value: 0, 1.4
  • Percentage value: 100%, 50%

Example 1

Give the image a brightness of 125%:

.banner-image {
filter: brightness(125%);
}

All contributors

  1. robgmerrill's avatar'
    robgmerrill
    robgmerrill's avatar'
    robgmerrill124 contributions
  1. Favicon Icon
    robgmerrill
Looking to contribute?
  • Learn more about how to get involved.
  • Edit this page on GitHub to fix an error or make an improvement.
  • Submit feedback to let us know how we can improve Docs.

Learn CSS on Codecademy

Career path

Full-Stack Engineer

A full-stack engineer can get a project done from start to finish, back-end to front-end.
Checker Dense
Includes 51 Courses
Checker Dense
Certificate Icon
With Professional Certification
Checker Dense
Level Icon
Beginner Friendly
169 Lessons
Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Checker Dense
Includes 34 Courses
Checker Dense
Certificate Icon
With Professional Certification
Checker Dense
Level Icon
Beginner Friendly
131 Lessons
Free course

Learn CSS

In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
Checker Dense
Level Icon
Beginner Friendly
8 Lessons

Company

  • About
  • Careers
  • Affiliates
    • Twitter Icon
    • Facebook Icon
    • Instagram Icon
    • Youtube Icon

Resources

  • Articles
  • Blog
  • Cheatsheets
  • Code challenges
  • Docs
  • Projects
  • Videos
  • Workspaces

Support

  • Help Center

Resources

  • Articles
  • Blog
  • Cheatsheets
  • Code challenges
  • Docs
  • Projects
  • Videos
  • Workspaces

Support

  • Help Center

Plans

  • Paid memberships
  • For students
  • Business solutions

Community

  • Forums
  • Chapters
  • Events
  • Code Crew
  • Learner Stories
  • Discord

Codecademy from Skillsoft

Codecademy from Skillsoft

Subjects

  • AI
  • Cloud Computing
  • Code Foundations
  • Computer Science
  • Cybersecurity
  • Data Analytics
  • Data Science
  • Data Visualization
  • Developer Tools
  • DevOps
  • Game Development
  • IT
  • Machine Learning
  • Math
  • Mobile Development
  • Web Design
  • Web Development

Languages

  • Bash
  • C
  • C++
  • C#
  • Go
  • HTML & CSS
  • Java
  • JavaScript
  • Kotlin
  • PHP
  • Python
  • R
  • Ruby
  • SQL
  • Swift

Career building

  • Career paths
  • Career services
  • Interview prep
  • Professional certification
  • —
  • Full Catalog
  • Beta Content
  • Roadmap

Mobile

  • Download on the App Store
  • Get it on Google Play

Mobile

  • Download on the App Store
  • Get it on Google Play
  • Privacy Policy
  • Cookie Policy
  • Do Not Sell My Personal Information
  • Terms
Made with ❤️in NYC © 2023 Codecademy