OBS Discord Icon Appearance Change Generator

Generator to create custom CSS for displaying members on a Discord call in OBS Studio, such as horizontal alignment or square icons

Tool for changing the appearance of the icon / Tool for changing the appearance of the text channel

1. Appearance settings

User for picture change

Only one user
Discord user ID *
Memo
※ Optional
Image URL *
URL of the image posted on Discord
Mouth image URL
※ Optional

Movement
Speed of movement
css_maker.border_and_back_light_color
Hide user
Darken quiet user

Advanced options

Limit icon size

Show user with no picture

2. Check preview

User (click to switch)

3. Copy CSS

:root {
  /* 画像のみ変更したいときはここのURLを書き換える */
  /* 000000000000000000  */
  --img-stand-url-000000000000000000: url("/assets/trance_alfe-3kJfmZCo.png");
  --img-mouth-url-000000000000000000: url("");
}

/* ここから下は見た目の変更用CSS */
body, #root {
  overflow: hidden !important;
}
[class*="Voice_voiceStates__"] {
  display: flex; 
  align-items: flex-end; 
  padding: 16px;
} 
[class*="Voice_voiceState__"] {
  height: auto; 
  margin-bottom: 0px;
} 
[class*="Voice_avatar__"] {
  filter: brightness(70%);
} 
[class*="Voice_avatarSpeaking__"] {
  position: relative; 
  filter: brightness(100%); 
  animation: 750ms infinite alternate ease-in-out speak-light,750ms infinite alternate ease-in-out speak-jump; 
  animation-duration: 750ms;
}  
[class*="Voice_name__"] {
  display: none;
}

img {
  display: none;
}

img[src*="avatars/000000000000000000"] {
  content: var(--img-stand-url-000000000000000000);
  display: block;
  width: auto;
  height: auto;
  max-width: 400px;
  border-radius: 0;
  border: none;
}
img:not([src*="avatars/000000000000000000"]), img:not([src*="avatars/000000000000000000"]) + [class*="Voice_user__"] {
  display: none;
}
@keyframes speak-jump {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: 10px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes speak-light {
  0% {
    filter: drop-shadow(0 0 2px #FFFFFF);
  }
  50% {
    filter: drop-shadow(0 0 8px #FFFFFF);
  }
  100% {
    filter: drop-shadow(0 0 2px #FFFFFF);
  }
}

4. Paste OBS

To apply custom CSS to OBS, please refer to the following instructions.