Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Triple Color Border Gradient

Subtle and Elegant Border Transitions

Enhance your elements with smooth single-color border gradients. This effect creates a refined transition from light to dark shades of the same hue, adding depth and a modern aesthetic to your design.

Key Features:

Refined Aesthetic: Adds a soft gradient effect to element borders.
Easy Implementation: Use predefined classes for quick application.
Fully Customizable: Adjust thickness, color variation, and gradient direction.
Performance Optimized: Lightweight CSS ensures smooth rendering.
Cross-Browser Support: Works consistently across modern browsers.

Theme Color Gradient

Theme

Dark Theme

Light Theme

Theme with White

Dark Theme with White

Light Theme with White

Theme with Black

Dark Theme with Black

Light Theme with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtTe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtTe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkTe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtTeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkTeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtTeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtTeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkTeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtTeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme with Black</div>

Red Color Gradient

Red

Dark Red

Light Red

Red with White

Dark Red with White

Light Red with White

Red with Black

Dark Red with Black

Light Red with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtRd FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtRd FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkRd FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtRdWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkRdWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtRdWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtRdBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkRdBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtRdBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with Black</div>

Yellow Color Gradient

Yellow

Dark Yellow

Light Yellow

Yellow with White

Dark Yellow with White

Light Yellow with White

Yellow with Black

Dark Yellow with Black

Light Yellow with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtYw FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtYw FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkYw FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtYwWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkYwWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtYwWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtYwBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkYwBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtYwBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow with Black</div>

Orange Color Gradient

Orange

Dark Orange

Light Orange

Orange with White

Dark Orange with White

Light Orange with White

Orange with Black

Dark Orange with Black

Light Orange with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtOe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtOe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkOe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtOeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkOeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtOeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtOeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkOeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtOeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange with Black</div>

Blue Color Gradient

Blue

Dark Blue

Light Blue

Blue with White

Dark Blue with White

Light Blue with White

Blue with Black

Dark Blue with Black

Light Blue with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtBe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtBe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkBe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtBeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkBeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtBeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtBeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkBeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtBeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue with Black</div>

Green Color Gradient

Green

Dark Green

Light Green

Green with White

Dark Green with White

Light Green with White

Green with Black

Dark Green with Black

Light Green with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtGn FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGn FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGn FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtGnWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGnWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGnWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtGnBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGnBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGnBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with Black</div>

Pink Color Gradient

Pink

Dark Pink

Light Pink

Pink with White

Dark Pink with White

Light Pink with White

Pink with Black

Dark Pink with Black

Light Pink with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtPk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtPkWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPkWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPkWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtPkBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPkBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPkBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink with Black</div>

Purple Color Gradient

Purple

Dark Purple

Light Purple

Purple with White

Dark Purple with White

Light Purple with White

Purple with Black

Dark Purple with Black

Light Purple with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtPe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtPeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPeWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtPeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkPeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtPeBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with Black</div>

Gray Color Gradient

Gray

Dark Gray

Light Gray

Gray with White

Dark Gray with White

Light Gray with White

Gray with Black

Dark Gray with Black

Light Gray with Black

Source Code


<div class="Wh25p Pg25 FxCr Br5 CrBrGtGy FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGy FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGy FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtGyWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGyWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGyWe FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray with White</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtGyBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Gray with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtDkGyBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Gray with Black</div>
<div class="Wh25p Pg25 FxCr Br5 CrBrGtLtGyBk FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Gray with Black</div>

Web Tool

Welcome Amit

Logout

Change Password

Change Email