Gradients
Mihr UI includes 112 pre-built linear gradients organized into three categories: gray, brand, and decorative. All gradients use two-color stops and CSS-standard angles.
Hover over any swatch to see its color stops and angle. Use GrayGradients, BrandGradients, and DecoGradients to access them in Dart.
Gray gradients
14 neutral gradients built from MihrColors.gray. Use GrayGradients.fromScale() to generate from a custom gray palette.
Dark
dark600to500
#535862 90deg #717680
dark700to600
#414651 45deg #535862
dark800to600_45
#252B37 45deg #535862
dark800to600_90
#252B37 90deg #535862
dark800to700
#252B37 28.5deg #414651
dark900to600
#181D27 45deg #535862
dark900to700
#181D27 45deg #414651
Light
light50toWhite
#FAFAFA 180deg #FFFFFF
light100toWhite
#F5F5F5 180deg #FFFFFF
light100to25
#F5F5F5 180deg #FDFDFD
light100to50
#F5F5F5 180deg #FAFAFA
light200to50
#E9EAEB 180deg #FAFAFA
light200to25
#E9EAEB 180deg #FDFDFD
light200to100
#E9EAEB 180deg #F5F5F5
Brand gradients
7 gradients built from MihrColors.brand. Use BrandGradients.fromScale() to generate from any accent palette.
Brand dark
dark600to500
#7F56D9 90deg #9E77ED
dark700to600
#6941C6 45deg #7F56D9
dark800to600_45
#53389E 45deg #7F56D9
dark800to600_90
#53389E 90deg #7F56D9
dark800to700
#53389E 28.5deg #6941C6
dark900to600
#42307D 45deg #7F56D9
dark900to700
#42307D 45deg #6941C6
Decorative gradients
91 hand-picked decorative gradients for backgrounds, cards, and illustrations. Access via DecoGradients.g01 through DecoGradients.g91, or iterate with DecoGradients.all.
g01
#A5C9E8 180deg #F8C5AC
g02
#F8C2BB 180deg #A1BCD1
g03
#FFD1FF 180deg #FADDC4
g04
#FADDC4 225deg #FFAA6E
g05
#FCBE9F 270deg #FFECD2
g06
#FECFFF 180deg #FFF88C
g07
#FFFDE4 45deg #FFEAF6
g08
#E8DEE9 180deg #FDCAF1
g09
#A8CCFE 45deg #FEEAF8
g10
#CFC7F6 0deg #E8B6A7
g11
#CCCB80 135deg #D576EB
g12
#7B6AE0 45deg #F9BBB0
g13
#E0C3FC 135deg #8EC5FC
g14
#FED6E3 0deg #A8EDEA
g15
#F9F77A 135deg #C3CFE2
g16
#DFD1C5 45deg #FFF6EB
g17
#FFF6B7 135deg #F6B5BA
g18
#F7FEC7 45deg #FFED46
g19
#FEAFB8 0deg #F5E7EF
g20
#BFCDD9 45deg #9DEFFA
g21
#FFF1EB 0deg #ACE0F9
g22
#C1CFC4 0deg #D8ECCD
g23
#A9CAFD 45deg #C2E9FB
g24
#AACBEE 0deg #E7F0FD
g25
#84FAB0 0deg #8FD3F4
g26
#53A0FF 45deg #9FFF85
g27
#74EBC5 270deg #9FACE8
g28
#A4B79A 45deg #C5ECF5
g29
#889DE3 45deg #B1F4CF
g30
#7CDADA 45deg #F6B7AA
g31
#81FFB8 45deg #FFA0F7
g32
#9EFBC4 0deg #F8F58E
g33
#43EF8E 45deg #FFEB3A
g34
#0FFF00 135deg #58CFF8
g35
#D1FDFF 0deg #FDDDB2
g36
#E8C0FD 0deg #D8DEDB
g37
#FFA4F6 45deg #B7D0FF
g38
#CD6CF2 0deg #F1F3FF
g39
#F8C8F3 315deg #3ADDFA
g40
#E8DEE9 0deg #8DC2E8
g41
#A4A9B6 0deg #BACBE0
g42
#9BB8B8 45deg #EA8AEA
g43
#E280FF 135deg #9F44D3
g44
#CE9FFC 135deg #7367F0
g45
#726DF2 135deg #E151E5
g46
#A38DED 0deg #8991C7
g47
#F6C8D4 0deg #9795F0
g48
#A7A6CB 0deg #8989BA
g49
#D0AFD9 0deg #87D9E1
g50
#81FFEF 135deg #F087B4
g51
#DCB0ED 135deg #9999CC
g52
#FFF5C3 135deg #9452A5
g53
#F1CA74 135deg #A64DB6
g54
#4D6AD0 45deg #FF907E
g55
#FFCF71 135deg #2376DD
g56
#6BD07A 135deg #5312D6
g57
#6FD9FE 180deg #DF8985
g58
#FA71CD 0deg #C471F5
g59
#43CBFF 135deg #9708CC
g60
#7579FF 180deg #8224FF
g61
#AD00FE 45deg #00E0EE
g62
#86F7FE 135deg #66A8FF
g63
#0096FD 0deg #2AF598
g64
#FFB800 45deg #FFF500
g65
#FFABA8 135deg #FCFF00
g66
#FF7A00 45deg #FFD439
g67
#FFD3A5 135deg #FD6585
g68
#F9D423 180deg #E14FAD
g69
#F74FAC 135deg #FCB24F
g70
#F49062 135deg #FD371F
g71
#FF6C6C 45deg #DD78FF
g72
#F077B4 135deg #923AA2
g73
#C589CF 180deg #EE609C
g74
#C7EAFD 0deg #E8198B
g75
#F093FB 135deg #F5576C
g76
#6CEEEC 135deg #D093CD
g77
#EE9AE5 135deg #5961F9
g78
#6A11CB 270deg #2575FC
g79
#0017E4 45deg #3793FF
g80
#000BFB 0deg #005BEA
g81
#4B73FF 45deg #7CF7FF
g82
#5EFCE8 135deg #736EFE
g83
#7028E4 0deg #E5B2CA
g84
#7B73F5 90deg #6C77AB
g85
#6018FF 135deg #E1467C
g86
#D079EE 45deg #8A88FB
g87
#C09FFF 135deg #981ED2
g88
#9823EA 0deg #5F728D
g89
#B50FFF 135deg #6A1ED2
g90
#4300B1 45deg #A531DC
g91
#7048A2 215deg #6867EA