How to make ion-items transparent?

I am trying to make ion-items transparent by adding style: background-color: rgba(255, 255, 255, 0.1); to:


to all of them, but still I see white background. How to make list items transparent?

Very much a CSS wimp here, but have you tried:

background-color: transparent;


Hi I am new here and I am trying the same thing.

I want to change the background color for my ion-list in side menu. adding style like background or background color doesn’t really work :frowning: how do I add a style to an ion tag? Can I handle it like a div tag with id’s and such things? I tried to change the color in the safari devtools and it worked for al lists in my app but not for the side menu.

I found the solution in another forum post

My solution is
.my-menu {
background-color: #3f4041;

.my-menu .item, .my-menu .item-content, .my-menu .item-complex{
background-color: rgba(0,0,0,0);
color: #FFFFFF;

I add the class my-menu to ion-content in my side menu.

I don’t know if it’s a good way but it worked for my…I am open to better solutions =)


did you know, what exactly .item, .item-content and .item-complex are using for?

I use a CSS class to make the job, something like this inside your content:

<ion-item class="item item-trns text-center">
      I'm transparent!

And this on your style.css

.item.item-trns {
	border-color: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	color: white; 

The result:


Thanks. @swfideas Itworked for me. I had the same problem and wanted something like that. It is an encouragement for us novices in development and in Web frameworks using Ionic.

it works , thank you

Thanks!! Its Work!!:muscle:

The following worked for me in ionic 4

<ion-item color="transparent">


this changes the color of the text how would it work

Here is a solution in Ionic 4:


<ion-list class="bg-transparent">
    <ion-item color="none" lines="none">
        Some random text
    <ion-item color="none" lines="none">
        Some random text


.bg-transparent {
  background: transparent;

Important things to note:

  • Set background color of the main list to transparent by applying the class and adding CSS as shown.
  • Add the color="none" attribute to each of the ion-item.
  • lines="none" remove the lines under each of the ion-item

That should do it!


try this…
–background: transparent;
it’ll work.
refer this for reference.

This doesn’t work in Ionic/Vue 5. :slightly_frowning_face: