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

Single Color Text Gradient

Enhance Text with Smooth Gradients

Our single-color text gradient effect adds depth and style to your typography. By smoothly transitioning between shades of a single color, this effect enhances readability while maintaining a sleek and modern look.

Key Features:

Fully Customizable: Adjust gradient intensity and direction to match your brand’s design.
Consistent Across Devices: Ensures smooth text gradient rendering on all screen sizes and resolutions.
Subtle & Elegant: Achieve a soft gradient effect without overpowering the text.
Easy Integration: Apply text gradients with minimal effort using modern CSS techniques.
Cross-Browser Compatibility: Guarantees a seamless text gradient experience across all major 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 FxCr Pg30 CrGtTe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme</div>
<div class="Wh25p FxCr Pg30 CrGtDkTe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme</div>
<div class="Wh25p FxCr Pg30 CrGtLtTe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme</div>
<div class="Wh25p FxCr Pg30 CrGtTeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkTeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtTeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Theme with White</div>
<div class="Wh25p FxCr Pg30 CrGtTeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Theme with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkTeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Theme with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtTeBk  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 FxCr Pg30 CrGtRd  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red</div>
<div class="Wh25p FxCr Pg30 CrGtDkRd  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red</div>
<div class="Wh25p FxCr Pg30 CrGtLtRd  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red</div>
<div class="Wh25p FxCr Pg30 CrGtRdWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkRdWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtRdWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Red with White</div>
<div class="Wh25p FxCr Pg30 CrGtRdBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Red with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkRdBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Red with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtRdBk  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 FxCr Pg30 CrGtYw  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow</div>
<div class="Wh25p FxCr Pg30 CrGtDkYw  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow</div>
<div class="Wh25p FxCr Pg30 CrGtLtYw  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow</div>
<div class="Wh25p FxCr Pg30 CrGtYwWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkYwWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtYwWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Yellow with White</div>
<div class="Wh25p FxCr Pg30 CrGtYwBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Yellow with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkYwBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Yellow with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtYwBk  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 FxCr Pg30 CrGtOe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange</div>
<div class="Wh25p FxCr Pg30 CrGtDkOe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange</div>
<div class="Wh25p FxCr Pg30 CrGtLtOe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange</div>
<div class="Wh25p FxCr Pg30 CrGtOeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkOeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtOeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Orange with White</div>
<div class="Wh25p FxCr Pg30 CrGtOeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Orange with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkOeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Orange with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtOeBk  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 FxCr Pg30 CrGtBe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue</div>
<div class="Wh25p FxCr Pg30 CrGtDkBe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue</div>
<div class="Wh25p FxCr Pg30 CrGtLtBe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue</div>
<div class="Wh25p FxCr Pg30 CrGtBeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkBeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtBeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Blue with White</div>
<div class="Wh25p FxCr Pg30 CrGtBeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Blue with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkBeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Blue with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtBeBk  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 FxCr Pg30 CrGtGn  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green</div>
<div class="Wh25p FxCr Pg30 CrGtDkGn  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green</div>
<div class="Wh25p FxCr Pg30 CrGtLtGn  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green</div>
<div class="Wh25p FxCr Pg30 CrGtGnWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkGnWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtGnWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with White</div>
<div class="Wh25p FxCr Pg30 CrGtGnBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Green with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkGnBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Green with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtGnBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Green with Black</div>

Pink Color Gradient

Copy Code :

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 FxCr Pg30 CrGtPk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink</div>
<div class="Wh25p FxCr Pg30 CrGtDkPk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink</div>
<div class="Wh25p FxCr Pg30 CrGtLtPk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink</div>
<div class="Wh25p FxCr Pg30 CrGtPkWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkPkWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtPkWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Pink with White</div>
<div class="Wh25p FxCr Pg30 CrGtPkBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Pink with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkPkBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Pink with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtPkBk  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 FxCr Pg30 CrGtPe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple</div>
<div class="Wh25p FxCr Pg30 CrGtDkPe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple</div>
<div class="Wh25p FxCr Pg30 CrGtLtPe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple</div>
<div class="Wh25p FxCr Pg30 CrGtPeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with White</div>
<div class="Wh25p FxCr Pg30 CrGtDkPeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with White</div>
<div class="Wh25p FxCr Pg30 CrGtLtPeWe  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with White</div>
<div class="Wh25p FxCr Pg30 CrGtPeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Purple with Black</div>
<div class="Wh25p FxCr Pg30 CrGtDkPeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Dark Purple with Black</div>
<div class="Wh25p FxCr Pg30 CrGtLtPeBk  FtWt900 TtAnCr BrRs20 BxSwFgCrGy">Light Purple with Black</div>

Web Tool

Welcome Amit

Logout

Change Password

Change Email