Ripple ADDON-MOBILE

    
      
    

      
        Copy
      
      
    
  

    
      <div
    tuiRipple
    [style.--tui-ripple-background]="'radial-gradient(circle, #5c0067 0%, #00d4ff 100%)'"
>
    I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams
    glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time
    to die.
</div>
<div
    tuiRipple
    [style.--tui-ripple-background]="'skyblue'"
>
    I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams
    glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time
    to die.
</div>
<div
    tuiRipple
    [style.--tui-ripple-background]="'red'"
>
    I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams
    glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time
    to die.
</div>
<div tuiRipple>
    I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams
    glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time
    to die.
</div>
<div
    tuiRipple
    [style.--tui-ripple-background]="'blue'"
>
    I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams
    glitter in the dark near the Tannhauser gate. All those moments will be lost in time... like tears in rain... Time
    to die.
</div>

    

      
        Copy
      
      
    
  

    
      [tuiRipple] {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--tui-border-normal);
    border-radius: 1rem;
    user-select: none;
    margin-block-end: 1rem;
    overflow: hidden;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <div tuiRipple="button,.block">
    <button
        tuiButton
        type="button"
    >
        Button
    </button>

    <div class="block">Content</div>
</div>

    

      
        Copy
      
      
    
  

    
      .block {
    inline-size: 10rem;
    block-size: 5rem;
    margin-block-start: 2rem;
    border: 1px solid var(--tui-background-accent-1);
}

.block,
button {
    position: relative;
    overflow: hidden;
}

    

      
        Copy