Back Go to Grids

EVA CSS Gradients

Unlimited gradients variations with Emmet-style syntax.

Gradient System All Combinations

Gradients

Unlimited gradients variations

Gradient Types

Four main gradient types available in EVA CSS

grad-linear Linear gradients
grad-radial Radial gradients
TEXT grad-linear-text
TEXT grad-radial-text

Direction Controls

Control gradient direction with intuitive classes

Main Directions
d-t to top ↑
d-r to right →
d-b to bottom ↓
d-l to left ←
Diagonal Directions
d-tl top-left ↖
d-tr top-right ↗
d-bl bottom-left ↙
d-br bottom-right ↘

Angle Controls

Precise angle control from 0° to 360° in 5° intervals

a-0 0 degrees
a-45 45 degrees
a-90 90 degrees
a-135 135 degrees

Note: Angles override directions. Don't use d-* and a-* together.

Example: grad-linear from-brand to-accent a-45

Text Gradients

Apply gradients directly to text for stunning typography effects

LINEAR grad-linear-text
RADIAL grad-radial-text
ANGLE with direction
FADE with angle

Perfect for: Titles, headers, call-to-action text, and branding elements

Example: grad-linear-text from-brand to-accent d-tr

Directions & Angles

Available Directions
d-t top ↑
d-r right →
d-b bottom ↓
d-l left ←
d-tl top-left ↖
d-tr top-right ↗
d-bl bottom-left ↙
d-br bottom-right ↘
Available Angles
a-0 0°
a-45 45°
a-90 90°
a-135 135°
a-180 180°
a-225 225°
a-270 270°
a-315 315°

Brand Gradients

Brand to other colors
to accent
to extra
to dark
to light
to transparent
diagonal ↗
diagonal ↙
45° angle
Brand variations
brand → brand_
brand → brand__
brand-d → brand-b
brand-d_ → brand-b_
Radial brand
radial to accent
radial to extra
radial to light
radial transparent

Accent Gradients

Accent to other colors
to brand
to extra
to dark
to light
to transparent
diagonal ↗
diagonal ↙
90° angle
Accent variations
accent → accent_
accent → accent__
accent-d → accent-b
accent-d_ → accent-b_
Radial accent
radial to brand
radial to extra
radial to light
radial transparent

Extra Gradients

Extra to other colors
to brand
to accent
to dark
to light
to transparent
diagonal ↗
diagonal ↙
135° angle
Extra variations
extra → extra_
extra → extra__
extra-d → extra-b
extra-d_ → extra-b_
Radial extra
radial to brand
radial to accent
radial to light
radial transparent

Dark Gradients

Dark to other colors
to brand
to accent
to extra
to light
to transparent
diagonal ↗
diagonal ↙
180° angle
Dark variations
dark → dark_
dark → dark__
dark-d → dark-b
dark-d_ → dark-b_
Radial dark
radial to brand
radial to accent
radial to light
radial transparent

Light Gradients

Light to other colors
to brand
to accent
to extra
to dark
to transparent
diagonal ↗
diagonal ↙
270° angle
Light variations
light → light_
light → light__
light-d → light-b
light-d_ → light-b_
Radial light
radial to brand
radial to accent
radial to dark
radial transparent

Complex Combinations

Brand-d → Accent-b diagonal ↗
Extra_ → Light radial
Dark-b_ → Brand__ diagonal ↙
Accent-d → Extra-b 315° angle

AllCombinations

All possible combinations of EVA CSS linear gradients

This grid shows a random sample among the 13,448 possible combinations!

1 type linear
41 colors + variations
8 directions basic + diagonal