diff --git a/grammars/css.cson b/grammars/css.cson
index ca9e925..fad0a29 100644
--- a/grammars/css.cson
+++ b/grammars/css.cson
@@ -584,6 +584,39 @@
             'include': '#string'
           }
         ]
+      },
+      {
+        # @custom-at-rule
+        'begin': '(?i)(?=@[\\w-]+(\\s|\\(|/\\*|$))'
+        'end': '(?<=})(?!\\G)'
+        'patterns': [
+          {
+            'begin': '(?i)\\G(@)[\\w-]+'
+            'beginCaptures':
+              '0':
+                'name': 'keyword.control.at-rule.css'
+              '1':
+                'name': 'punctuation.definition.keyword.css'
+            'end': '(?=\\s*[{;])'
+            'name': 'meta.at-rule.header.css'
+          }
+          {
+            'begin': '{'
+            'beginCaptures':
+              '0':
+                'name': 'punctuation.section.begin.bracket.curly.css'
+            'end': '}'
+            'endCaptures':
+              '0':
+                'name': 'punctuation.section.end.bracket.curly.css'
+            'name': 'meta.at-rule.body.css'
+            'patterns': [
+              {
+                'include': '$self'
+              }
+            ]
+          }
+        ]
       }
     ]
   'color-keywords':
diff --git a/spec/css-spec.coffee b/spec/css-spec.coffee
index ab67c1a..504c7b3 100644
--- a/spec/css-spec.coffee
+++ b/spec/css-spec.coffee
@@ -137,8 +137,8 @@ describe 'CSS grammar', ->
 
       it 'does not tokenise identifiers following an @ symbol', ->
         {tokens} = grammar.tokenizeLine('@some-weird-new-feature')
-        expect(tokens[0]).toEqual value: '@', scopes: ['source.css']
-        expect(tokens[1]).toEqual value: 'some-weird-new-feature', scopes: ['source.css', 'meta.selector.css']
+        expect(tokens[0]).toEqual value: '@', scopes: ['source.css', 'meta.at-rule.header.css', 'keyword.control.at-rule.css', 'punctuation.definition.keyword.css']
+        expect(tokens[1]).toEqual value: 'some-weird-new-feature', scopes: ['source.css', 'meta.at-rule.header.css', 'keyword.control.at-rule.css']
 
       it 'does not tokenise identifiers in unfamiliar functions', ->
         {tokens} = grammar.tokenizeLine('some-edgy-new-function()')
@@ -619,8 +619,8 @@ describe 'CSS grammar', ->
           expect(lines[0][0]).toEqual value: '/*', scopes: ['source.css', 'comment.block.css', 'punctuation.definition.comment.begin.css']
           expect(lines[0][1]).toEqual value: ' Not the first line ', scopes: ['source.css', 'comment.block.css']
           expect(lines[0][2]).toEqual value: '*/', scopes: ['source.css', 'comment.block.css', 'punctuation.definition.comment.end.css']
-          expect(lines[1][0]).toEqual value: '@', scopes: ['source.css']
-          expect(lines[1][1]).toEqual value: 'charset "UTF-8";', scopes: ['source.css', 'meta.selector.css']
+          expect(lines[1][0]).toEqual value: '@', scopes: ['source.css', 'meta.at-rule.header.css', 'keyword.control.at-rule.css', 'punctuation.definition.keyword.css']
+          expect(lines[1][1]).toEqual value: 'charset', scopes: ['source.css', 'meta.at-rule.header.css', 'keyword.control.at-rule.css']
 
         it 'highlights invalid @charset statements', ->
           lines = grammar.tokenizeLines " @charset 'US-ASCII';"