Current Snippets

Contact InkTide

info@inktidedesign.com

© 2025 InkTide Design

Gradient Backgrounds

Backgrounds that blend colors with gradient styles

Home

/

Snippets

/

Components

/

Gradient Backgrounds

Linear Gradients

Use .pt-bg-l-gradient-(color) to add a smooth linear gradient background that fades from one color to another.

Showcase

HTML/CSS

*-gray-light

*-gray

*-gray-dark

*-primary

*-secondary

*-accent

*-red

*-orange

*-yellow

*-green

*-blue

*-purple

1

Radial Gradients

Use .pt-bg-r-gradient-(color) to add a circular gradient background that fades outward from the center.

Showcase

HTML/CSS

*-gray-light

*-gray

*-gray-dark

*-primary

*-secondary

*-accent

*-red

*-orange

*-yellow

*-green

*-blue

*-purple

1

Transparent Gradients

Use .pt-bg-t-gradient-(color) to add a transparent gradient that fades from dark in the middle to clearer toward the sides.

Showcase

HTML/CSS

*-white

*-gray-light

*-gray-light-1

*-gray-light-2

*-gray-light-3

*-gray-light-4

*-gray-light-5

*-gray

*-gray-dark

*-gray-dark-1

*-gray-dark-2

*-gray-dark-3

*-gray-dark-4

*-gray-dark-5

1