Search
- MDB Pro
- Products
- Getting Started
  - Home page
  - About MDB
  - Download
  - Quick start
  - Installation guide
  - Styles customization
  - Full tutorial
  - Roadmap
  - MDB CLI
  - Gulp
  - Webpack
  - MDB Angular
  - MDB React
  - MDB Vue
- Layout
- Utilities
  - Borders
  - Clearfix
  - Close icon
  - Display
  - Embeds
  - Float
  - Flexbox
  - Horizontal align
  - Image replacement
  - Overflow
  - Position
  - Screenreaders
  - Sizing
  - Spacing
  - Stretched link
  - Text
  - Vertical align
  - Visibility
- Content
  - Code
  - Figures
  - Flags
  - Icons usage
  - Icons list
  - Images
  - Typography
  - Responsive Font Size
- CSS
  - Demo
  - Animations
  - Background Image
  - Colors
  - Color combination
  - Text Color
  - Gradients
  - Hover effects
  - Masks
  - Parallax
  - Shadows
  - Skins
  - Variables
- Components
  - Demo
  - Alerts
  - Buttons
  - Buttons group
  - Buttons social
  - Cards
  - Cards extended
  - Dropdowns
  - Jumbotron
  - List group
  - Loaders / Spinners
  - Panels
  - Pagination
  - Pills
  - Progress bars
  - Stepper
  - Tabs
  - Labels and Badges
- JavaScript
- Navigation
  - Compositions
  - Breadcrumbs
  - Footer
  - Hamburger Menu
  - Mega Menu
  - Navs
  - Navbar
  - ScrollSpy
  - SideNav
- Forms
  - Basic examples
  - Autocomplete
  - Builder
  - Checkbox
  - Contact form
  - Customization
  - Date Picker
  - Drag and drop
  - File Input
  - Inputs
  - Inputs Group
  - Multiselect
  - Radio button
  - Search
  - Select
  - Slider
  - Switch
  - Textarea
  - Time Picker
  - Validation
- Tables
  - Basic examples
  - Additional examples
  - Datatables
  - Editable
  - Editor
  - Generator
  - Pagination
  - Responsive
  - Scroll
  - Search
  - Sort
- Modals
- Design Blocks
- Tutorials
  - Basics
  - Bootstrap
  - jQuery
  - Angular
  - React
  - Vue
  - WordPress
  - Miscellaneous
- Plugins & Addons
- Free templates
- Expert Kits New
- Tools & Resources

CSS opacity

Author: Michal Szymanski

The opacity property specifies the opacity/transparency of an element.

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Opacity 0.2

Opacity 0.5

Opacity 1 (default)

CSS
HTML



                    img {
                      opacity: 0.5;
                    }



                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">

Previous lesson Next lesson

Spread the word:

Do you need help? Use our support forum

About the author

Michal Szymanski

Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.