diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index aa0b2ac7..0cdcc24b 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -31,7 +31,19 @@
                   placeholder="Toast message"
                 ></textarea>
               </div>
-
+              <div class="form-group mb-3">
+                <label for="toastMessage">
+                  <strong>Close Button HTML</strong>
+                </label>
+                <textarea
+                  [(ngModel)]="options.closeHtml"
+                  rows="2"
+                  class="form-control"
+                  name="closeHtml"
+                  id="closeHtml"
+                  placeholder="HTML for the close button"
+                ></textarea>
+              </div>
               <div class="form-group mb-3">
                 <div class="form-check">
                   <input
@@ -281,6 +293,38 @@
                   id="toastExtendedTimeout"
                 />
               </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseTime">
+                  <strong>Hide Ease Time</strong>
+                </label>
+                <input
+                  type="text"
+                  [(ngModel)]="toastr.toastrConfig.hideEaseTime"
+                  (ngModelChange)="fixNumber('hideEaseTime')"
+                  class="form-control"
+                  id="toastHideEaseTime"
+                />
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastShowEaseType">Ease Type</label>
+                <select class="form-control"
+                    name="easeType" 
+                    id="toastShowEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.easing">
+                   <option [ngValue]="null" disabled>Select Ease Type</option>
+                   <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                 </select>
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseType">Hide Ease Type</label>
+                <select class="form-control"
+                    name="hideEaseType" 
+                    id="toastHideEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.hideEasing">
+                  <option [ngValue]="null" disabled>Select Hide Ease Type</option>
+                  <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                </select>
+              </div>
             </div>
             <div class="col-md-3">
               <div class="row">
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index e870cea1..95b0188b 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -58,6 +58,7 @@ export class HomeComponent {
   inlinePositionIndex = 0;
   @ViewChildren(ToastContainerDirective) inlineContainers!: QueryList<ToastContainerDirective>;
 
+  easeTypes = [ "ease", "ease-in", "ease-out", "ease-in-out", "linear", "step-start", "step-end" ];
 
   constructor(public toastr: ToastrService, private renderer: Renderer2) {
     this.options = this.toastr.toastrConfig;
diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts
index fdd113ed..7a9f978a 100644
--- a/src/lib/toastr/toast.component.ts
+++ b/src/lib/toastr/toast.component.ts
@@ -19,7 +19,10 @@ import { ToastrService } from './toastr.service';
 @Component({
   selector: '[toast-component]',
   template: `
-  <button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button" aria-label="Close">
+  <button *ngIf="options.closeButton && options.closeHtml" (click)="remove()" 
+    class="toast-close-button" aria-label="Close" aria-hidden="true" [innerHTML]="options.closeHtml">
+  </button>
+  <button *ngIf="options.closeButton && !options.closeHtml" (click)="remove()" class="toast-close-button" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
   <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
@@ -47,7 +50,7 @@ import { ToastrService } from './toastr.service';
       ),
       transition(
         'active => removed',
-        animate('{{ easeTime }}ms {{ easing }}')
+        animate('{{ hideEaseTime }}ms {{ hideEasing }}')
       )
     ])
   ],
@@ -69,7 +72,9 @@ export class Toast implements OnDestroy {
     value: 'inactive',
     params: {
       easeTime: this.toastPackage.config.easeTime,
-      easing: 'ease-in'
+      hideEaseTime: this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime,
+      easing: this.toastPackage.config.easing,
+      hideEasing: this.toastPackage.config.hideEasing ? this.toastPackage.config.hideEasing : this.toastPackage.config.easing
     }
   };
 
@@ -181,9 +186,10 @@ export class Toast implements OnDestroy {
     }
     clearTimeout(this.timeout);
     this.state = { ...this.state, value: 'removed' };
+    const hideEaseTime = this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime;
     this.outsideTimeout(
       () => this.toastrService.remove(this.toastPackage.toastId),
-      +this.toastPackage.config.easeTime
+      + hideEaseTime
     );
   }
   @HostListener('click')
diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
index 46333d94..df6c6070 100644
--- a/src/lib/toastr/toastr-config.ts
+++ b/src/lib/toastr/toastr-config.ts
@@ -48,6 +48,11 @@ export interface IndividualConfig {
    * default: false
    */
   enableHtml: boolean;
+  /**
+   * html for the close button (possibly unsafe)
+   * default: undefined
+   */
+  closeHtml: string | undefined;
   /**
    * css class on toast component
    * default: ngx-toastr
@@ -73,11 +78,21 @@ export interface IndividualConfig {
    * default: ease-in
    */
   easing: string;
+  /**
+   * animation hide easing on toast
+   * default: ease-out
+   */
+  hideEasing: string;
   /**
    * animation ease time on toast
    * default: 300
    */
   easeTime: string | number;
+    /**
+   * animation hide ease time on toast
+   * default: 0
+   */
+  hideEaseTime: string | number;
   /**
    * clicking on toast dismisses it
    * default: true
@@ -220,13 +235,16 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = {
   timeOut: 5000,
   extendedTimeOut: 1000,
   enableHtml: false,
+  closeHtml: undefined,
   progressBar: false,
   toastClass: 'ngx-toastr',
   positionClass: 'toast-top-right',
   titleClass: 'toast-title',
   messageClass: 'toast-message',
   easing: 'ease-in',
+  hideEasing: 'ease-out',
   easeTime: 300,
+  hideEaseTime: 0,
   tapToDismiss: true,
   onActivateTick: false,
   progressAnimation: 'decreasing',